Wickham's HTML & CSS tutorial

Gradiated background images

View in Firefox, Safari, Opera and IE. IE6 often needs different solutions. In general IE7 and IE8 display like Firefox. IE9 has been released and the updates are mainly related to HTML 5 and CSS3 issues and it displays to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE6 to IE9

You can gradiate the background-image in two ways; either by using a gradiated background-image for the top of the page and another gradiated background-image below it or by stretching a gradiated image to the fixed height and/or width of the div.

1 green icon The containing div for this content has a background-image 4px wide with a gradiated image 375px high which only has repeat-x repeating horizontally so it only goes down 375px.

Below 375px the body style takes over with a darker gradiated image. It's a tiny square 4*4px but it is slightly gradiated which you don't notice until it is repeated horizontally and vertically below the top background-image in .container2. The background-color #444 doesn't apply as it is a default nearly black color in case the background-image doesn't load.

If you don't state a repeat-x or -y as in body it will repeat in both directions. If you only state one repeat like the .container2 is only repeat-x then it will not repeat in the other direction.

View/Source or Page Source for the adjusted styles for this page which are in the head section style tag.

2 green icon The example above merely repeats a background-image horizontally and the gradiation does not cover the whole height of the containing div. If you have a div with a fixed height and width and you want the gradiation over the whole of the div like this one you can stretch a gradiated image which has a certain height or width over the different height or width of the div using the code:-
<img style="width: 730px; height: 160px" src="images/gradiatedshadow.jpg" alt="shadow image"/>

The original shadow image was 45px high and has been stretched to height: 160px. It doesn't work very well with this example because it has been stretched so much that the banding in the original is made more obvious but it demonstrates the principle.

If you did this with a photo it would elongate everything but with images of a regular type like shadows or gradiation it will look alright.

The use of an image in a div instead of a background-image means that other content has been inserted over the gradiated image with Layers. The whole code is:-

<div class="noborder" style="position: relative; width: 730px; height: 160px; z-index: 1;">
<img style="width: 730px; height: 160px;" src="images/gradiatedshadow.jpg" alt="shadow image">
<div style="position: relative; top: -160px; z-index: 2; border: 0; padding: 0 20px;">
<p style="color: #333;"><b>2</b> <img src="images/green16x16.jpg" alt="green icon"/> The example ...... using the code:-</p>
<p><span class="code">
<img style="width: 730px; height: 160px" src="images/gradiatedshadow.jpg" alt="shadow image">
</span></p>
</div></div>

An alternative would be to use a transparent gradiated gif image superimposed on the text.

Software to create gradient images is available at dynamicdrive.com.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 0px. The examples above are in a containing div with width: 730px; with padding: 20px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev