Resizing the background image with CSS

With monitor resolutions getting larger and larger, and with the advent of large screen TV's that can double as computer monitors, web developers have a dilemma. What resolution do you use to build a web site that will look good with all these different resolutions?

It use to be that you built web sites for a 800x600 resolution monitor, those days are gone. Now only about 3% of users have their monitors set at 800x600. The current sweet spot is 1024x768 with 20% of the viewers using this resolution. With more and more people moving to 1280x800 at 19% and 1280x1024 at 15%. The resolutions are all over the place. At this point in time you should optimize your web site design for 1024x768. That means that those folks that are still using 800x600 will have to scroll to see the screen.

The fact that a significant number of users not only have different resolutions, but most are greater than 1024x768 has led web designers to design sites that stretch their width for different resolutions. The CSS term for this type of layout is "liquid layout." The problem with liquid layouts is that if the screen stretches too wide, and text lines get longer and longer, text becomes difficult to read. The solution for this is the "jello layout," where the expansion of a web page is limited to a maximum width.

One of the solutions to the changing width is to use a consistent background color to surround your main content. This works and it is the easy way out, the content is set to a maximum width and the background covers whatever width is left. At higher resolutions though this looks ugly, too much background color. The solution is to make your background more interesting with a background picture or composite image, and that's when you run into some problems.

The traditional way to put a background image on your site is in the CSS file, like so: body {background-image: url(../images/myimage.jpg)}. The only problem with doing that is that you can't re-size the background image in CSS. To do this you have to move the image to your html file. This allows you to style and re-size your image in the CSS file.

Before we get into how to do this, a word about the background image you will use. If you expect to stretch the background image in width from one resolution to the next, you want an image that is more landscape oriented than portrait oriented. The problem with a portrait image is if you stretch the image too much you will distort the picture, landscape images bend easier in width. You also should scale the image to a size close to the size in width it will be at 1024x768, or 1024px. You can crop the image if it becomes too long in height. Lastly, you should worry about the image load time or the file size, and consider compressing the image to reduce the file size.

OK, we have the image we want for our background set up and ready to go. How do we set the background image to re-size with changing resolutions. First the html structure:




Background Image

Nothing unusual here. We are inserting an image into the web page right after the body. The tricks are in the CSS, let's get to that...


* {
	margin: 0; 
	padding: 0;
}

body {
	text-align: center;
}

#backimg img { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%;
	z-index: 0; 
} 

That's all there is to it...well, not quite. This will anchor your image to the upper left corner as a start point. The "position: absolute;" takes the image out of other relational groupings with the rest of your web page, and is important to making this work. The width: 100%; tells the browser to stretch the image across the entire monitor window. Well, get to the z-index in a second.

Well, that's all well and good, if you change browser resolutions, you'll see the image stretch, depending on your monitor resolution, but how does the content area fit into this set up? Well, the "bodywrap" tags represents the content of your web page. You want that centered in your window with the background image to show on either side of your content. It would be nice if the content would re-size with the background, and well use the same technique to do just that. Here's the CSS.

#bodywrap {
	position:absolute;
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 30px;
	z-index: 20;  
}

This will expand your content with a 3% border for your image to show on the edges. Use the margin-top: 30px; if you would like to show a piece of the background image at the top of the screen. If you'd like to have your content have a white backdrop, we need to add another div. It would be background image, then backdrop, then bodywrap for your content, here's the CSS section for the backdrop, like so...

#backdrop {
	position: absolute; 
	background-color: white;
}

Here the color of your backdrop is white and we have also taken the backdrop out of the web page components layout, but it is absolutely embedded in the bodywrap.

Which brings us to the z-index. The z-index tells the browser which layer to put on top of another layer. The higher the number, the more that content block is moved to the front of the screen. Thus our background image is 0 and the bodywrap is in front of that image at a z-index of 20.

Here's the complete CSS file in a compressed format. Enjoy.


* {margin: 0; padding: 0; }
body {text-align: center; }
#backimg img {position: absolute; top: 0; left: 0; width: 100%;	z-index: 0; } 
#bodywrap {position:absolute; width: 94%; margin-left: 3%; margin-right: 3%; margin-top: 30px; z-index: 20; }
#backdrop {position: absolute; background-color: white; }

Comments

Resizing the background image with CSS — 4 Comments