Responsive navbox image

[Lisa M]

This might be beyond the support your willing to do, but….
is there any way to make my navbox image responsive?

#pref-navbox {
background: #526b79 url(http://demo15.thewritedesigner.com/wp-content/uploads/2014/12/art-deco-nav-03.png) no-repeat;
text-align: center;
}

http://demo15.thewritedesigner.com/

Unfortunately, I’ll be changing the site by the time you get to this. I’ll attach a screenshot.

Thank you,
Lisa
artdecohomepage.jpg

Attachments:

You must be logged in to view attached files.

[Anonymous]

Well looks like it’s been already changed 🙂 but If you want that image to scale based on the size of the browser window. Here is the tip, try this CSS

#pref-navbox {
    background-image:url('http://demo15.thewritedesigner.com/wp-content/uploads/2014/12/art-deco-nav-03.png') no-repeat;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

Do not set width, height, or margins.

[Lisa M]

Thank you so much! My client liked the Art Deco version, and so this is imperative! Again, thank you!

[Anonymous]

Welcome 🙂 .. it looks better than before.

[Author]

Posts