Image Basics - Background Demo

The following is a demonstration of a full screen background image from Stu Nicholls' CSSPlay web site and reproduced here with permission. I encourage you to take some time to explore the interesting things that Stu has done using CSS which range from the practical to the fanciful. The CSS Play web site is the kind of place I go for inspiration... and to learn! Be sure to check out the CSSPlay Archives as well. There is bound to be something there that catches your eye!

The original CSSPlay 100% Background Demo has two versions. The first version , which I demonstrate here, has the background image fill the entire screen. The second version uses a proportional background example.

Take a look at my version of this demo. Example .

Choice of Image for 100% Background

The sunset image I used in my example is quite large, sized at 1500px wide and 1000px tall. But it is also optimized using a 0.7% blur (truthfully the image was blurred to begin with! <grin>) which helps to reduce the file size. It was saved in the JPG format with a total file size of 34K which is in the "so-so" range. Acceptable but not great. But for the size of the image, it IS great!

Why did I use such a large image? In fact, this technique will function with any size image but I had a reason for using a large image. It might not have been wholly necessary since about 50% of current computers are set to a screen resolutions of 1024x768. But there is an increasing population who are using higher monitor resolutions, up to 2000px wide. If a smaller image were used it would still function for this demo. But in this demo, when a JPG image is viewed on a high resolution monitor where the viewport is larger than the image, it will become pixilated. The browser begins repeating blocks of color information to allow the image to stretch to a size that is larger than the original. This discussion brings up the first consideration you must make if you are to employ this technique. What physical size does your background image need to be in order to look OK when it is expanded on a high resolution monitor? The answer partially depends on the image you use.

As I intimated above, one of the things that allows this sunset image to work is that it is slightly blurred. Not only does it reduce the file size but it also has the effect of making the eyes focus on the text rather than the background. Another thing working for the sunset photo is that there is a large area of relatively homogenous color which makes the text easier to read than the CSSPlay examples. And the third aspect going for the sunset photo is that it's really hard to tell when the image gets distorted. Try resizing your browser window in both width and height. The sunset looks pretty reasonable at any dimension whereas the rabbit in the CSSPlay demo was likened to a "killer bunny" in one of the comments left on the web site by a user who had a wide-screen monitor. If you're going to use this technique in a real-world application, choose your background image wisely!

For contrast I created a second example using the background image shown on the previous lecture page. Example.

This is a transparent GIF file containing 2 colors, sized at 800px wide and 533px tall, smaller than most current screen resolution settings. The file size weighs in at a tiny 4.1K! This background image will download in an instant even over a dial-up connection! And it scales well no matter what dimension the browser window is ... well, that is to say as long as the text is still readable, the image looks OK.

How Is It Done?

Below is the HTML and CSS code that creates the 100% Background which you can use for your own purposes. Of course you will study the CSS <smile!> and if there is something that doesn't make sense, review the property in the lecture materials. Finding an interesting application of CSS and studying it to understand it, then applying it, is one of the best ways to learn! Just copy the HTML and CSS into your own document(s) using your own images and text. (Here is a text file to make it easy.) Please don't use the images from the CSSPlay web site without asking for permission. If you use this CSS technique on any web page you create, Stu Nicholls would greatly appreciate an acknowledgement and link to the CSSPlay site (provided above). Otherwise his code is free and available to everyone.

The CSS

html, body {
   margin:0; 
   padding:0; 
   width:100%; 
   height:100%; 
   overflow:hidden;
   }
 
body {
   font-family:verdana, arial, sans-serif; 
   font-size:76%;
   }
 
#background{
   position:absolute; 
   z-index:1; 
   width:100%; 
   height:100%;
   }
 
#scroller {
   position:absolute; 
   width:100%; 
   height:100%; 
   top:0; 
   left:0; 
   overflow:auto; 
   z-index:2;
   } 
 
#content {
   padding:5px 300px 200px 200px;
   }
 
p {
   line-height:1.8em; 
   letter-spacing:0.1em; 
   text-align:justify;
   }
    
/* the #fixed rule is for the optional sidebar */
#fixed {
   position:absolute; 
   top:210px; 
   left:10px; 
   width:150px; 
   z-index:10; 
   color:#369; 
   border:1px solid #000; 
   padding:10px;
   }

The HTML

(Note: The IMG tag is broken into 3 lines so it will fit in this code box.)

<body>
   <div><img src="imageName.gif" alt="" 
   name="background" width="###" height="###" 
   id="background" title="optionalTitle" /></div>
 

   <div id="fixed">
      <p>This is the optional sidebar.</p>
   </div>
 	
   <div id="scroller">
 	
      <div id="content">
         <p>All content goes here.</p>
      </div>
 
   </div>
</body>

Note: If you find something on the CSSPlay web site that you would like to learn and use, just do a "View Source" on the page and copy the code to your own text editor. Most of the examples use embedded CSS in the head of the HTML document so it is easy to capture both the HTML markup and CSS at the same time. Remember, of course, that you will need to provide your own images.

Resources

CSS Play Home page.
CSS Play Archives
100% Background Demo Version 1
100% Background Demo Version 2