Warning: count(): Parameter must be an array or an object that implements Countable in /home/robev/public_html/blog/wp-includes/post-template.php on line 284

Using a gradient background on a website that fades out

It took me a while to figure out how to get a gradient background to look exactly like I wanted. While the simplest solution is to use a repeated background to create a gradient effect, I wanted it to fade out at the bottom. If you look at this site, there is only a gradient at the top of the page. As the page gets longer, the background is a constant colour. Somehow I needed to have two different backgrounds, both working at the same time. It took a lot of digging but I finally found a solution, which I’ll post here. 

Here is the code that is necessary to get it to work. First, create a thin image that will be your gradient. Mine is located here.

The css code to use this as a repeated background is:

body {
	background: url('gradient.jpg') repeat-x;
}

To then get the ‘second’ background image, which is shown when the page gets really tall, I use this image. The css code is:

html {
	background: url('bg.jpg');
}

Hopefully this can be useful to some people.

Posted in Programming | Tagged , , | Leave a comment | 2,346 views

Leave a Comment

Your email address will not be published. Required fields are marked *