Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Sidebar background image styling in portrait phone view

Home Forums Support Sidebar background image styling in portrait phone view

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #206626
    Max

    Tom

    I am using intelliwidgets. You can assign id for a widget.

    I am running the following css:

    #blogsidebar, #forumsidebar  {
        //*border: 1px solid #eee !important; *//
        margin-top:45px;padding-bottom:20px; padding-top:170px; 
        background-image: url('http://localhost/forum/wp-content/uploads/chil.png');background-position: center top; background-height:100px;}

    The background image is not a solid colour or pattern. It is a long horizontal item with a drop shadow underneath and lots of whitespace surrounding. That is repeat x is no good to me.

    The background image width is the same as the sidebar container width: 370px. Displays fine in full screen and tablet views. However, when viewed in portrait phone it is too wide.

    How can I set the width so it scales down to a suitable width when viewed in portrait phone?

    Thanks in advance for you assistance.

    Kind Regards

    Max

    #206705
    Tom
    Lead Developer
    Lead Developer

    Background images are tough like that – they’re not really built for responsive design.

    The Background Size attribute might be your best bet: http://www.w3schools.com/cssref/css3_pr_background-size.asp

    #206765
    Max

    Would something like this work?

    @media (max-width:480px) {.freeimage {width:35%;height:100%;}}

    #206772
    Max

    Ooops how do I add a class to a background image?

    #206775
    Max

    Well the following is as ugly as it gets…But..it works:

    @media (max-width:480px) {#blogsidebar  {
        margin-top:45px;padding-bottom:20px; padding-top:160px; 
        background-image: url('http://localhost/forum/wp-content/uploads/blogsidebar.png');
        background-repeat: no-repeat; background-position: center top; background-size:80%}}
    #206875
    Tom
    Lead Developer
    Lead Developer

    Not that ugly – glad it works 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.