Fill Page Background By Stretched Image

This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

the image is just an inline image with a class name of “bg” and no extra markup.

  • Fills entire page with image, no white space
  • Scales image as needed
  • Retains image proportions
  • Image is centered on page
  • Does not cause scrollbars
  • Cross-browser compatible
  • Isn’t some fancy shenanigans like Flash

The only caveat is that it doesn’t quite meet all the requirements layed out about, in that it doesn’t center in IE 7, doesn’t work at all in IE 6, and may not always be proportionate depending on the original image size.

Here is the CSS:

img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
		left: 50%;
		margin-left: -512px; }
}

div#content {
	/* This is the only important rule */
	/* We need our content to show up on top of the background */
	position: relative; 

	/* These have no effect on the functionality */
	width: 500px;
	margin: 0 auto;
	background: #fff;
	padding: 20px;
	font-family: helvetica, arial, sans-serif;
	font-size: 10pt;
	line-height: 16pt;
	-moz-box-shadow: #000 4px 4px 10px;
	-webkit-box-shadow: #000 4px 4px 10px;
}

body {
	/* These rules have no effect on the functionality */
	/* They are for styling only */
	margin: 0;
	padding: 20px 0 0 0;
}

this is a sample of html code:


<body><img src="background.jpg">
...

Source: css-tricks

Category:How to
Tags:
Browse: Home » learning » How to » Fill Page Background By Stretched Image

Leave a Reply