css techniques: resizable background behind static foreground object

The last CSS Technique got me thinking about ways to keep a foreground object static as the background is resized horizontally. Again, a picture is worth 1,000 words so view the example. Be sure to resize the browser window horizontally to see the effect.

I used this for a header, which is maybe where it‘s application makes the most sense, though it is essentially just one DIV nested inside another DIV. It could be used when a horizontal navigation bar is to remain in place in front of a resizable header image; or for static text that likewise will remain in place; or both (multiple DIVs nested inside a header DIV).

Since this isn‘t intended to be instructional for Photoshop, this post is much shorter than the last one. All that you need to achieve the effect is a background image, a foreground image (or text), the HTML file and the CSS file. Some knowledge of HTML and CSS is assumed and FTP access to a server is needed.

I‘ve provided the files used in the example, which you can download along with a PDF version of these instructions.
You will need to set up a folder for this project. In it, create another folder named images.

  1. Create a header image. It should be narrower than the width of a browser window. The best effect is achieved when it contains (or appears to fade into) a solid background color to the right as the window size and (and the image) are pulled to the right. Take note of the height dimension and the hexidecimal code for the background color. They will be used in the CSS coding.

In this example (mantleObjects.jpg), I used an image that is 200 px high and contains the solid background color #C2C2C2.

  1. Save for Web & Devices optimized as appropriate for the image. Save the file in the in the images folder of your project folder.
  2. Create the static foreground image or text. The height should be less than the height of the background and the Background Contents must be transparent.
  3. Save for Web & Devices in .gif or .png file format in the images folder.

The example foreground image is fallenAngel.png.

Now for the coding:

  1. In your favorite text editor create a new file and copy the following basic HTML structure and paste it into your file (or in Dreamweaver, open a new HTML file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>resizable background behind static foreground object</title>
</head>
<body>
</body>
</html>

Save this file as test.html in your project folder.

  1. Create another new blank file for the CSS (or open a new CSS file in Dreamweaver) and save this file as style.css in your project folder.

To link the CSS file to the HTML file, add the following to the <head> section of index.html:

<link href="style.css" rel="stylesheet" type="text/css" />
Inside the <body> there will be 2 DIVs (in this example, though more may be added, as explained above).
<div class="background">
<div class="flyover"></div>
</div>

Note that the first DIV (shown in bold) wraps the second DIV.

That’s all we need for the HTML.

Open style.css.

  1. Start by styling the class: background (note: these could both be IDs instead of classes).
    1. Set the background to the color that was established from step 1.
    2. The background url will point to the header image that was created in step 1.
    3. The image will not repeat.
    4. The vertical background position can be set. In this case, I set it to top.
    5. Height should match the image.
    6. Width is set to 100%.
    7. Position is important. To work correctly, the position is set to relative.

The styling for this class:

.background {
background: #2C2C2C url(images/mantleObjects.jpg) no-repeat top;
height: 200px;
width: 100%;
position: relative;
}

Using the image files provided, when you upload and test the file, it should look like this:

As you resize the browser window the image will appear to stretch across the screen.

  1. Next, style the flyover class:
    1. The background url will point to the foreground image created in step 3.
    2. It will not repeat.
    3. Set the width and the height to match the dimensions of the image.
    4. The position is important and is set to absolute.
    5. Establish how far from the left edge and how far down from the top the image is to appear.
    6. Finally, to ensure that it is always on top, give it a z-index of 1000.

The styling for the flyover class:

.flyover {
background: url(images/fallenAngel.png) no-repeat;
height: 200px;
width: 200px;
position: absolute;
left: 600px;
top: 0px;
z-index: 1000;
}

Upload and test the file again. You should see something like this if you positioned the foreground object at 600 px from the left and 0 px from the top. As you make the browser window wider, the image will remain fixed, buy appear to float on top of the objects in the background.

Below is the same background image and a 600 px x 50 px text image used in the flyover class. As you resize the screen, the position of the text remains fixed.

Tags: , ,

This entry was posted on Friday, November 6th, 2009 at 3:00 pmand is filed under . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.