0

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

NFdesign
  • 51
  • 1
  • 11
  • 1
    Are you using media queries, or just % widths? – Chad Jul 15 '13 at 22:17
  • I'm using % widths, but also have been tweaking some things with @media for under 480px width screens – NFdesign Jul 15 '13 at 22:37
  • If you set the media query to change the font size below a certain screen width, it should work fine. The header images themselves are constrained by the font sizes. If the fonts get smaller, the navigation will, too. – Chad Jul 15 '13 at 22:40
  • thanks, but I am not talking about the navigation bar images. I am talking about the main header banner image. It is 985 x 386px but it does not scale at all. I got the logo image to scale when I make the browser smaller, but those main banner images do not. – NFdesign Jul 15 '13 at 22:58

1 Answers1

1

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;
}
Community
  • 1
  • 1
hungerstar
  • 21,206
  • 6
  • 50
  • 59