CODEWITHSUNDEEP
csswordpresswordpress-theming
NFdesign
NFdesign

Reputation: 51

Wordpress header image is not responsive

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

Upvotes: 0

Views: 2130

Answers (1)

hungerstar
hungerstar

Reputation: 21675

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

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

Upvotes: 1

Related Questions