Make header image scale?

[brent_james]

Is there a way in CSS to make the header image scale to the size of the window so it keeps its proportions? The site looks ok on a desktop browser, but on iPad or iPhone the header does not fit to screen.

IntendtoInspire

[Paulie_D]

The best way is not to put the image in the header but rather to set it as the background image of your header in your CSS. You can then tweak the CSS with media queries.

[brent_james]

Got it. Thanks Paulie_D

[snillor]

Or you could keep the image in the markup (often done if it’s a logo that links to the HOME page) and style it to occupy a percent of it’s containing element. I’m doing that on a redesign for my art league’s website.

#header img { max-width: 80%; }

The height automatically scales in proportion to the width. Of course, this won’t work in those older browsers that don’t understand max-width.

[Author]

Posts