Background colour effect

  Billy911 11:56 28 Sep 2004

How do I make the background colour dark at the top and gradually go lighter towards the bottom of the webpage using Dreamweaver MX? A good example of the effect that I mean is the click here page

  Taran 17:19 28 Sep 2004

including raw code and images.

The Macromedia site you linked to is a lovely example of how a good backgound image can be repeated over the whole page for a smooth, transitional effect. There are code blocks you can insert into a page which mimick this look but by comparison the results you get using code are far less pleasing than by using the image.

Basically the background is a 1 pixel wide image, darker at the top and lighter at the bottom, saved as a .jpg

This image is repeated over the page by using a small line of code in a Cascading Style Sheet (CSS) document that reads as follows:

body {
background: #c6cfd0 url(/images/master/background.jpg) repeat-x}

Basically, this tells the page to use an image for the backgound called background.jpg, which is in the master folder, which is inside the images folder, hence the filepath /images/master/background.jpg

The important bit here is the small bit of code at the end of the line that says:


This tells the image to repeat over the page using the x axis.

You could use a small style block in the top of your web page along these lines to get the same effect:

<style type="text/css">


body {
background: #c6cfd0 url(/images/background.jpg) repeat-x}



Note that this assumes the image you want to use is called background.jpg and that it lives in a folder of your website called images.

The above code goes after the <title></title> tags but before the </head> tag.

A code only background gradient effect may be acheived by altering the <body> tag as follows:

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

It looks pretty awful compared to the image repeat option, but it's only fair to make you aware of the common ways of doing this.

I'd go for the repeating image option. Make your image using the colours you want and base your page code on the above.

Ask if you get stuck.


  Billy911 17:40 28 Sep 2004

Phew, thanks Taran. I'll give it a try. TRY being the operative word.

  Taran 18:15 28 Sep 2004

All you need is a small image (small in terms of a thin strip and actual file size) which is repeated either vertically or horizontally.

The Macromedia site example was a 1 pixel wide by 1000 pixel high image repeated horizontally (over the x axis). Had the effect been darker to the left and lighter to the right (or vice versa) the image could well have been 1000 pixels wide and 1 pixel high and repeated vertically (over the y axis).

Think of dozens of strips of paper, each coloured the same way (darker at one end) and all lying side by side. That's what you are aiming for. You use one small image and repeat it rather than a large image for efficient design. A large image takes longer to download and would display oddly at different screen resolutions. Repeating an image makes it fill the screen no matter what resolution is being used to view the page.

To save you scratching your head, here is a link to a sample page I've just knocked up: click here

You can download it as a Zip file if you like, and play with it: click here

The page is XHTML. If you want a plain vanilla HTML page you should be able to work it out from the example, or ask for more information if required.


  Taran 18:18 28 Sep 2004

I've also just noticed an error in the code only method I posted so ignore it for now, unles you really want to chase that way of doing things. If you want to try it this way let me know and I'll post some code that actually works.

Clearly I need more caffeine...


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iPhone X review

How to find a font: Discover the name of a typeface with these apps

The best iPhone for 2017

Comment créer un compte PayPal pour payer en ligne ?