Handmade
CSS Design

Tutorial: Complex site backgrounds without CSS 3

20 Jul 2011

image of Tutorial1 - Complex Site Backgrounds without using CSS3

Welcome to Handmade CSS Design’s first tutorial, we hope you enjoy it and find it useful.

CSS 3 is all the rage now and rightly so, but it has its drawbacks, one of which is a lack of support in older browsers. As we all know support for older browsers is sometimes imperative, so CSS 3 gets moved to the not so critical points in the development of a site.

Here I will be showing you how to create complex multi-image backgrounds for your sites that are even compatible in IE6!

This article comes following the recent development of an ultra-micro site over at Express Publishing for the Upstream Italian Educational Books. For the more observant the site in the above link does make use of CSS 3 in the shadow around the main white container a not so critical requirement so can be lost in older browsers.

Image of a screenshot of Upstream Italy

As you can see in the image above the site background would be impossible to create using only the <html> and the <body> tags as it has 3 background areas:

  1. Top: orange and lighter blue area with a dark blue line directly below
  2. Center: textured background
  3. Bottom: darker blue area

Even though we have 3 elements here in some situations where you have more than this you would simply rinse and repeat the process to obtain the desired results.

One last thing before we get started, as we all know there are many ways in which you can achieve the same conclusion, this is simply one way that works for this case.

Let’s get our hands dirty then shall we:

The principles which we will be using today were first (that we know of!) discussed back in 2004 in an article by Brian Williams on A List Apart entitled Onion Skinned Drop Shadows.

Step 1:

All html pages even HTML5 have the following two basic tags the <html> and the <body> which is nested within the <html> tag. So this allows for us to hook onto the <html> tag and start there and then add <div id=”body2”> just under the <body> tag as shown below, should you need more for your design then this is where it is done.


<html>
    <body>
        <div id=”body2”> <!—for the extra image required -->
            <div class=”container”>  <!-- for the site’s body -->
                <div class=”header”>
                    <!—in this container you place the sites header and navigation -->
                </div>
                <div class=”maincolumn”>
                    <!—in here you place the code for the sites content -->
                </div>
                <div class=”footer”>
                    <!—in here you place the code for the sites footer -->
                </div>
            </div>
        </div>
    </div>
</div>

and the CSS will look like this…


html {
    background:#0a66b3 url(../images/site-bkg.png); margin:0 0 0 0; padding: 0 0 0 0;
}

Image of the site's background which is a repeating pattern
<– the textured repeating background and the dark blue colour found in the background.


body {
    background:url(../images/site-bkg-top.png) no-repeat top center; margin: 0 0 0 0; padding: 0 0 0 0;
}

Image fo the site's background top centered image
Note: This image is placed top and center, and 3000px wide (with a 2kb weight so it poses no problems with those whom have a slower connection to the internet) to ensure that even someone with a large screen will not have nasty gaps in the design.


#body2 {
    background:url(../images/site-bkg-bottom.png) repeat-x bottom; margin: 0 0 0 0; padding: 0 0 0 0;
}

Image of the site's background bottom horizontally repeating image

 

 

<–  We need this horizontally repeating blue background to hide the textured background above

Note: In this case we know the height of the footer will be fixed!

 

 

This means that we now have a complete site background!

Step 2:

You will have noticed the <div class=”container”> this is the div we will use to center our design with the image we have placed top and center in our background (the <body> tag above) in this case the site’s CSS will look like this…


.container {
    position:relative; top:0px; left:0px; width:956px; height:auto; margin: 0 auto;
}

Note: we have not placed any images here this is used to simply center the whole site to the background using the margin:0 auto; command.

Step 3:

That just leaves the footer, you will have noticed above that the image is repeated only horizontally and not vertically. This is because for this to work we need a fixed height for the footer which needs to be equal to the height of the…


.footer {
    clear:both; position:relative; top:0px; left:0px; height:145px; padding:0 0 0 0; margin:0 0 0 0;
}

Note: The footer is the same height as the #body2 image this is important so that you do not have any gaps at the bottom of the page.

So what happens if you think that things might change in the future?

Well set the height to min-height:145px; overflow:hidden; and the height of your image to say 1000px this will mean that regardless of how much the footer grows, you will still be covered. Let’s say I have to date never seen a footer reach 1000px but you never know what the future may hold.

And bobs yer uncle you have completed your complex CSS 2 site background! That works in all browsers from IE6 upwards.

As you may have noticed we have not gone into to much detail as the subjects we will be covering are not for beginners.

Leave your constructive comments below and we will also gladly answer any questions you may have regarding the above.


Image of the back button

You may remain informed as to all of our latest news and events via the RSS 2.0 feed that you will find here!

top