WordPress标题图片没有响应

Question

I am still trying to get the hang of responsive web design.

I am not able to get the header images to scale as the browser gets smaller.

This is the site,

http://instreamenergy.com/strategic-partnerships/

if I try to make the .header-image #header #title-area height:100% or anything else it just reverts to 20px or something and is stuck there.

Any tips would be awesome! thanks

Answer 1

I think you're looking for the CSS3 property, background-size since your image is a background image for a DIV.

• Stretch and scale CSS background
• http://caniuse.com/background-img-opts

If you were using an image tag, <img> you could do this:

img {
     max-width: 100%;
}

You also need to get rid of some of the cruft in your CSS for #title-area . Doesn't look like it needs to be floated: left; or have overflow: hidden; . Removed width , changed height to min-height . no-repeat added to background .

I would update it to:

#title-area {
     background: url(your-image.jpg) no-repeat;
     padding-left: 0;
     min-height: 386px;
     float: none;
     overflow: visible;
     background-size: 100% auto;
}