Your Customers are Mobile, you will be too …

A common problem encountered by web developers first starting out is making the background of all their columns go full height. Often when we give say our left column one background and our content another the left column’s(or right column) background does not go all the way to the bottom of the page. This throws out the look of the site. So we are told to use a background image in our wrapper that has the same width of the column.

But what happens when we are using a fluid layout? we can’t create an image to be the exact same width of our column if the column width will vary from browser to browser and screen size to screen size. Can we still make our background go all the way to the bottom of the page with a variable width column? Yes we can.

We can even do this for a 3 column liquid layout.

Making Column Backgrounds Full Height even with Liquid Layouts

OK first thing we need to do is make our background wider than our site width. That is right we are going to use and image that is wider than everything. We are going to make the images background color either transparent or the color of what we want our content background to be.

For this example our left column is set to 25% of the width of our site.

So start in Fireworks or Photoshop or any imaging program you prefer and create a new image with a canvas 4000px’s wide and 1px high with a transparent background. We now need to add a rectangle 1000px wide by 1px high taking up the first 1000px of the image. Why 1000px? Because 1000px is 25% of 4000px. Remember our column is 25% of the width. So if you are using different measurements on your site adjust them accordingly. i.e. If your left column is 30% of the width you want this background color to take up the first 30% of the image.

Once you are ready save your image optimised for use on the net and make sure you save it inside your sites images folder.

Make sure when you save the image you maintain the alpha transparency. If you don’t this could lead to problem down the track if you wish to make a 3rd column using this technique.

Now that we have image ready ready its time to embed our background image into the site.

#wrapper {
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  background-image:  url(images/leftcolbg.gif);
  background-position:  25% 0%;
  background-repeat: repeat-y;
  float: left;
}

The important bit of the CSS we have here is is the back ground position property. By setting it at 25% on the x-axis the image will display the image 25% of the way across the image at the point 25% of the way across the site at all times. So in essence the background image is now sticking out both side of the website but the background image isn’t display past that point. Make sure you repeat it down the y-axis.

If our column is 30% width then we change the CSS to 30%.

Noe the float left, if you have other elements floated within your site you will need this property to make this trick work.By setting the margins to make up 100% of the screen like I have gets round the problem of it floating off the the left of screen if we want it to stay centered.

Now if we re-size our screen you will note that no matter what you do that column will have its background go all the way to the bottom of the pages and will maintain its appearance that it is the full width of that column.

But what happens if we want a left and right column doing this?

Adding a third column to our Liquid Layout

So you want to have this effect working on both the left and right columns. All we have to do is add a second background image to our wrapper. We are going to add a 25% width column again to our right side now.

We have the same starting point, create another image 4000px wide with a transparent background. We then add a rectangle 1000px (100px being 25% of 4000px like before). This time however we will place the rectangle at 3000px right through till the end.  And we save it like we did before but with another name.

Then we do our CSS

#wrapper {
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  background-image: url(images/rightcolbg.gif), url(images/leftcolbg.gif);
  background-position:  75% 0%,25% 0%;
  background-repeat: repeat-y;
  float: left;
}

See how we now have 2 background images in our wrapper. The second image though has a background position property of 75%. It will now display that image 75% of the way across it at 75% of the way across our wrapper.

Now if we re-size our page both columns will maintain their background colors no matter how we re-size the page.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: