Background Image Resize Using CSS

In this topic we are going to discuss about the technique to resize the background image as per window resolution.

Most of time we are thinking about of jquery and JavaScript techniques but we can find solution with the help of CSS itself.

simple to apply and also very effective, Let we see the coding.

HTML Code :

<body id="page-body">
	<img id="selBack" src="resize.jpg" alt="" title="" />
<div id="selContent">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
CSS Code :
html, body { margin: 0 auto; padding: 0; width: 100%; height: 100%; }
img { border: 0;}
img#selBack
{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
div#selContent
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#selContent p{
	color:#FFFFFF;
	padding:10px;
}

Also you can see the Demo, Please click here

http://demo.cogzideltemplates.com/designteam/background_image_resize/imageresize.html

Tags: Background Image Resizing in CSS

This entry was posted on Saturday, July 3rd, 2010 at 3:33 am and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.