CSS3 – Creating a multi-layered background

30 May

Creating a multi-layered background with CSS3 is quite simple – all you need to do is to specify multiple background images for the wrapper class:

However, we do need a fall back mechanism for browsers which do not support CSS3 and will never do (&*#*$& !!!). Further more, we’ll implement 3 backgrounds on top of each other in order to produce a result which:

  1. Has a background pattern
  2. Is enriched with another pattern which appears at the top of the page and disappears downwards
  3. Has another visual effect which for examples throw a sunlight effect behind the content
We start simple by adding background to the .body, which sets our base pattern for the page:
Now that this is set, we go ahead and prepare our page HTML structure:
The .container element is an independent element laying on the page and has no child elements. We set it’s position to fixed and give it the maximum size:
The background of this element has the texture we want to apply over the background .body pattern. At this point we are set with two background images, one over another. Note that the position of the element is fixed.
The next step is adding the effect over the body and texture. That would be our “light” element:
Again, this is an independent element with fixed position and z-index is just one above the container which allows us to create a visual light effect over the container. It’s up to you where you want to position the .light element in the page and you can control it’s position by either CSS or jQuery if you need it specially positioned at certain place while keeping it’s position dynamic in regards to the other elements.
The last but lot least is the .content element where you would place you page content:
This is the element which will finally has its own child elements (basically, your entire page). Main characteristics of this element are:

  1. z-index is higher than the .light element’s z-index (use small numbers so that you don’t run into problems with modal pop-ups)
  2. note that the position is absolute
  3. you can even set it’s own background if you need to

That would be it. Feel free to ask any questions.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: