CSS for background resize

[justinw]

Hi all,

I have a logo with a transparent background. It is placed over an image with a fade effect (see http://www.homezoneproperty.co.za/dev/index.php)

I would to have the faded green background resize to fill the whole top no matter the screen size.

How can I do this?

[arvana]

I would do it with layers:

img.background {z-index:10; width:100%}
img.header {z-index:20}

I don't work with tables much anymore, so I'm not 100% sure that this works within a table cell, but it's worth a try!

[weegillis]

You could try using an oversized image, then center it with the CSS. Your image could be as little as 5 to 10 pixels high, depending on quality, then repeat-y. Very few displays are more than 1600 pixels wide, so that could be your ceiling. Just extend the darkest regions right and left to achieve the length you need.

.headerback {
	background: #fff url('../images/back.jpg') repeat-y 50% 0%;
	]

This method reduces quality loss that may result from stretching the original image. Your main view will always be centered in (almost) any viewport width. It's kind of like overflow:hidden; but it's done automatically. Only as much of the image that can be displayed (based on parent container) will be displayed, the rest is simply truncated.

To be sure that your image always looks correct, (at least in non-IE) you could give the wrapping table a max-width of 1600px and let the page fill in naturally.

For the record, most browsers support image scaling. Simply make the img width="100%" and leave out the height. The image will stretch to fit the width of the parent container. Height will vary, according to final width.

If you include the height, the image may distort due to uneven scaling. I know this goes against the grain, and relies on the browser to perfom the necessary calculations, thereby slowing down the page, but it's a method that works, nonetheless, though probably not in this case due to fixed vertical size.