resizable background image

Many a times you want to prevent background image resizing on browser zoom in zoom out or keeping background image constant even if user zooms in / zooms out.

Many a times its required that the background image should take up full width height of the page and should not get cropped or repeated if the window size is less/decreased or more/increased respectively.

Using css background porperty one can’t possibly achieve that. So here’s a workaround. We take the big background image as an <img> element rather than setting it as the background of <body> or something.

<body>
<img src="wdw_bg.png" id="background"/>
<div class="centerContent">
<div class="inPadd opaque">
.. your content here...
</div>
</div>
</body>

and the CSS

#background{
	position:fixed; top:0px; left:0px;
	z-index:-100;
	width:100%;
	height:100%;
}

Setting height and width to 100% makes the image take up entire space. Negative z-index send it behind everything else, making it look like background. Position fixed prevents any empty background space if page content increases and scrollbars appear.
Check the demo (link provided at the end of article).
– the background image resizes according to browser size when you increase or decrease the borwser window’s size.
– the background image remains in original size even if you zoom in or zoom out


Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

One thought on “resizable background image”

Leave a Reply

Your email address will not be published. Required fields are marked *