Archived topic

Sidebar background image styling in portrait phone view

5 replies · Started by Max on July 5, 2016

Viewing posts 1–6 of 6

July 5, 2016 at 1:16 am #206626

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

July 5, 2016 at 8:57 am #206705

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

July 5, 2016 at 12:53 pm #206765

Would something like this work?

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

July 5, 2016 at 1:00 pm #206772

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

July 5, 2016 at 1:27 pm #206775

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

July 5, 2016 at 11:37 pm #206875

Not that ugly - glad it works :)

This archived topic is closed to new replies.

Start building better websites today.