Background gradients and css

Content links

1. Apply a background gradient to an element

A very popular use for gradients is using them as a background for web pages or paragraphs in the page.

The first thing to do is to create a gradient image like the one on the left, this should be 1px wide and the height of the <div>, <p> etc, element you wish to use it in. If you need help to create a gradient there is a gradient tutorial in the imaging section of the site.

Alternatively, if you want an instant gradient, go to Dynamic Drive's Gradient Image Maker page. All you have to do is input your start, end colours & image size and it will generate a gradient image for you.

The html

Having created and saved the gradient image, in your html file add a class to the element you wish to add a gradient to.

<p class="gradient"> Lorem ipsum dolor sit amet </p>

The css

And in your css file add a class for the gradient element.

.gradient {
height: 100px;
padding: 4px;
background: url(images/css-gradient.gif) 0% 0% repeat-x;
color: #fc2;
}

The height above is the image height, the background: url() will be your gradient image & path and the 0% 0% repeat-x tells the browser the image position (x & y) and to repeat it in the x axis (across the page).

The result can be seen below.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat ...

2. Apply a background gradient on hover

Hovering on this paragraph should show a gradient and text colour change. This works in Firefox, Opera etc, but as yet not in Internet Explorer, not unless you apply peterned's fix. You can use any background type (an image, color setting, opacity etc), but I've used a 100px height gradient image for this example. Just apply the following html/css to your paragraph.

The html

<div class="bkgrade">
<p> Lorem ipsum dolor sit amet </p>
<div>

The css

.bkgrade {
height: 150px;
padding: 2px;
}
.bkgrade:hover {
height: 150px;
padding: 2px;
background: url(images/bkgrade.gif) 0% 0% repeat-x;
color: #fc2;
}

The IE bit

For instructions on applying this in IE, there is a detailed explaination at peterned's site, with the csshover.htc behavior file for download.

3. Apply a background gradient to a whole page

This is a bit more problematic. I tried this out on a previous design of the site, but found that unless you keep all your pages the same height the gradient wouldn't work properly.

For example if all your pages have a height of 800px and your gradient image is 1px x 800px all is fine and dandy as this 800px high page shows.

If your pages are not uniform in height the gradient will be ok up to 800px height. For anything below 800px, the last colour in the gradient will show, as this 1200px high page shows.

The css

body {
background: url(images/gradient800.jpg) 0% 0% repeat-x;
}

Smooth transition gradients

The important thing to note is that the gradient image is saved as a jpg, rather than a gif. The image quality of the gif was adequate for a smaller gradient like the paragraph above, but on an extended gradient a jpg or png has a far smoother transition.

4. The M$ DXImageTransform method (IE only)

There is a non css way of applying a gradient to a page, but it is not cross browser compatable. I initially had this method applied on our MKI (pre css, white text on blue gradient) website, until an Opera user pointed out that our site was invisible.

What that means is that unless the page is viewed in anything other than IE, the background gradient will not appear. As I had no css file to set the background colour at the time, the page appeared with a white background and white text. DOH!.

View the DXImageTransform page with IE for the gradient effect, if you view with Firefox, Opera etc you'll just pick up the css background colour.

The M$ DXImageTransform code

<body style="filter:progid:DXImageTransform.Microsoft.Gradient
(endColorstr='#003366', startColorstr='#55aaee', gradientType='0');">

The above is fairly self explainitory, it replaces the <body> at the start of your page. You can alter the startColorstr & endColorstr to the colours you want to graduate from and to. The gradientType can be '0' for a top to bottom gradient and '1' for a left to right gradient.