Tutorial – Changing Background Effect with CSS

If you’ve ever been to thinkgeek.com you’ve probably noticed they have a background that looks like it changes when you scroll down to the bottom of the page. Just in case they don’t have the changing background I’ve setup a demo page here: Changing BG with CSS

So today I’m going to explain how this can be done relatively easily with some CSS and images designed for this purpose. Before we get to the code portion I’ll go over the images.

The first image I’ll talk about is a simple gradient with 2 colors. One will be the color of the main background and the other color will be for the bottom of the page. This is the image I will be using for the gradient:

The size of my image is a width of 2px(pixels) with a height of 256px(pixels) The reason for the height being 256 is that, that is double the size of the second image allowing me to leave plenty of room in the blue section for the second image to be shown without the brown part of the gradient obscuring the transition.

The second image is the changing background image. The way this is done is actually just by picking at least two colors. One that matches main background color (brown) and one that matches the main color (blue) of the gradient image. I’ve chosen to do pokadots simply because they are easy to make and you can see what I did clearly. Here is the second image I will be using (the “changing” image):

You’ll notice that none of the pokadots overlap, the reason for this is so that they will be a clear difference if they were to overlap they would look as though someone cut a portion of the pokadot out.

Now lets move on to the code, here is all the code that will be used to make this work:





CSS Changing Background




	

Changing the Background Using CSS and Images

If you've been to the Think Geek Website then you've likely seen this trick before. Making it seem as though the background changes is a simple trick that can be done with some CSS and an image designed for this.

Scroll to the bottom of the page to see what happens with the blue pokadot background image.

Note: I’ve added all the code in case you choose to copy it exactly it will be W3C Valid.

Lets take a look at the HTML/XHTML that will actually be needed to make this work:


Changing the Background Using CSS and Images

If you've been to the Think Geek Website then you've likely seen this trick before. Making it seem as though the background changes is a simple trick that can be done with some CSS and an image designed for this.

Scroll to the bottom of the page to see what happens with the blue pokadot background image.

Lets disregard the code inside of the “content” div as that is just there to give some information, all we really care about are the body and the “secretimage” div. The reason I put the “secretimage” div at the bottom of the page is simply because the transition will happen at the bottom of the page. Now lets see how these are being affected by the CSS:

body {
background:#998675 url(images/bluebrownfadebg.jpg) repeat-x bottom;
}

This is doing a few things first it tells the base background to be brown (#998675 to be exact), then it says an image (bluebrownfadebg.jpg) will be on top of that, then it restricts the images by only letting it repeat allow the x axis or horizontally, and lastly it tells the image to only appear at the bottom of body.

Now lets look at the CSS for the “secretimage” div:

#secretimage {
background:url(images/dotsbg.png) repeat-x;
height:128px;
width:100%;
position:fixed;
bottom:0;
left:0;
z-index:-1;
}

Now this is doing a bit more than just giving the div a background. You’ll notice this also makes the background image tile along the x axis. Also it is giving the div a height as we won’t have any content inside of the div, it also has a width of 100% so that it will tile across the complete width of the body.

The next part is giving it a fixed position so that while you scroll down the page the div will stay in place. Now that it won’t move we need to make sure it is at the bottom of the browser which is accomplished by bottom:0; and left:0; so that it starts at the bottom left of the browser.

The last thing we’ll do to the div is give it a z-index:-1 so that it will go behind the important parts of the website.

And the last thing to note about the code is that I gave the content div a height of 2000px(pixels) just to ensure you will have to scroll down the page to see the change.

That is how to do a changing background effect using CSS, this is a neat trick for long websites such as blogs.

Leave a Reply