Site map

spacer

Background gradients and css

Content links

spacer

Preamble

Listed below are a few methods for creating background gradients. I have included a short description in the gradient, along with the HTML and CSS. One way or another it has most browsers covered.

1. Applying a css background gradient

There are a few ways of implementing a css gradient. As with the border-radius declaration these are engine layout specific, at least until css3 is officially released.

The gecko engine uses the declaration -moz-linear-gradient, whilst webkit engines use -webkit-gradient. They both achieve the same thing in slightly different ways.

gecko based browsers (Firefox)

The linear gradient is part of the declaration
top declares where the gradient starts
#55aaee hexadecmial colour code (light blue) for the gradient start colour
#003366 hexadecmial colour code (dark blue) for the gradient end colour

webkit based browsers (Chrome, Safari)

The linear gradient is inside brackets with the rest of the gradient values
left top declares where the gradient starts
left bottom declares where the gradient finishes
from(#55aaee) hexadecmial colour code (light blue) for the gradient start colour
to(#003366) hexadecmial colour code (dark blue) for the gradient end colour

The css gradient HTML

<div class="css-grd">
<p>Applying a css background gradient to an element</p>
<div>

The css gradient CSS

.css-grd {
/* default background colour, for all layout engines that don't implement gradients */
background: #2a6da9;

/* gecko based browsers */
background: -moz-linear-gradient(top, #55aaee, #003366);

/* webkit based browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));

color: #000000; /* text colour (black) */
height: auto; /* gradient uses the full height of the element */
padding: 5px; /* distance from border edge to text */
}

The above can be applied to any element <div>, <p> etc or the whole page. For a full list of gecko and webkit based browsers check this wiki page. For an Internet Exporer solution see below.

2. Applying an image background gradient with css

css gradient

I can understand that the above method may be too much hassle. Plus the fact that it won't work in IE, at least until IE9 is released. The following method may prove more suitable, until css3 is released and standardises the declaration.

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, for this example the height is 100px.

If you need help to create a gradient there is a gradient tutorial in the imaging section of the site.

Having created and saved the gradient image, add a class in the HTML & CSS for the element you wish to add a gradient to. The CSS explaination is as follows:
background: url() will be your image path & name and 0% 0% repeat-x tells the browser the image position (x & y) and to repeat it in the x axis (across the page).

The image background gradient HTML

<p class="img-grd">Applying an image background gradient with css</p>

The image background gradient CSS

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

3. Applying a background gradient on hover

Hovering on this <div> 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 and css to your <div>.

The background gradient on hover HTML

<div class="hov-grd">
<p>Apply a background gradient on hover</p>
<div>

The background gradient on hover CSS

.hov-grd {
height: 100px;
padding: 5px;
}
.hov-grd:hover {
background: url(images/bkgrade.gif) 0% 0% repeat-x;
color: #000000;
height: 100px;
padding: 5px;
}

The IE6 bit

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

4. The Micro$oft 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 Internet Explorer, 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 Internet Explorer for the gradient effect, if you view with Firefox, Opera etc you'll just pick up the CSS background colour.

The Micro$oft 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.