[Resolved] Sidebar background image styling in portrait phone view

[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

[Tom]

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

[Max]

Would something like this work?

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

[Max]

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

[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%}}

[Tom]

Not that ugly – glad it works 🙂

[Author]

Posts