Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 8 - Creating an additional box for liquidity purposes

Because we will need to apply two backgrounds we have to create an additional box positioned absolutely that will contain all of the other elements. A sort of wrap if you like.

<div class="headerbackground">
<div class="content">
Content
</div>
<div class="navigation">
Navigation
</div>
<div class="header">
Header image
</div>
</div>

Think of this box as the lowest layer in a stack of four layers.

Let's apply a background image to it. We chose to specify headerbg.jpg as a background image because that's the image we want repeated (for expansion). We will also add other CSS references such as height: 267px; in order to ensure it as high as the Header box (the fact that it wraps the entire body doesn't) and width:100%; in order to ensure it stretches to a maximum.

div.headerbackground {
background: url("images/headerbg.jpg") repeat-x 0px 0px transparent;
margin: 0px;
height: 267px;
position: absolute;
width: 100%;
z-index: 1;
}

At the same time we place the header image as a background for the Header box. The way our header image is created requires us to align it to the left in order to create the desired effect.

div.header {
background: url("images/header.jpg") repeat-x 100% 0% transparent;
}

The 100% reference aligns the background of the Header box to the right.

The headerbackground box will expand as much as the resolution allows it to and creates the illusion that the header image expands.

Variations

Should the header image be inserted as a normal picture as opposed to a background the alignment can be made by applying a align="right" to the Header box.
Instead of creating a new box (headerbackground in our case) you can use the body instead for the headerbg.jpg. The drawback is that you won't be able to set left and right margins as we will in the next step.

body {
background: url("images/headerbg.jpg") repeat-x 0px 0px transparent;
}

Liquid CSS layouts tutorial structure

Back to Website Builder Tips: Making A Web Site Accessible

Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 8 - Creating an additional box for liquidity purposes

Variations

Liquid CSS layouts tutorial structure

Other Accessible Web Design articles