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 linear gradient

There are a few ways of implementing a css gradient. This covers the more popular linear-gradient, but radial-gradient is also possible. The standard css3 syntax for declaring a linear gradient is linear-gradient. As with the border-radius syntax there are engine specific declarations too, at least until css3 is generally taken up.

Standard css3 syntax

background: linear-gradient(top, #55aaee, #003366);

The linear- above describes the type of gradient
If no position/angle (left, right, top, bottom/45deg) is specified, then the default is a gradient going top to bottom
#55aaee hexadecmial colour code (light blue) is the gradient start colour
#003366 hexadecmial colour code (dark blue) is the gradient end colour

Support for older versions of browsers can be achieved by putting the following prefix before linear-gradient:
The gecko engine (Firefox) uses -moz-, webkit engines (Safari, Chrome) use -webkit-, whilst Opera uses -o-. They all implement the css3 standard in current versions of their browsers, but if you wish to support the older versions use these prefixes.
As a fall back for non supporting browsers a background colour should be stated for example background: #2a6da9;

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;

/* css3 standard format */
background: linear-gradient(top, #55aaee, #003366);

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

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

/* old opera based browsers */
background: -o-linear-gradient(top #55aaee, #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, webkit and opera 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.