Gradient Backgrounds Without Images

Having seen a number of forum posts discussing the creation of colour gradients in a web page without using an image, I decided to investigate whether it would be possible to apply a colour gradient as a backgound behind your page content without using an image.

First question: is it possible to create a colour gradient background behind your page content without using any images? The answer to this question is yes. With a bit of work and combining ideas from a few different places I was finally able to create a web page where the content appears in front of a colour gradient where the page contains no image references at all. The page with the colour gradient background shows both the effect itself and underneath that shows the code that I used to create the effect.

Second question: is this approach a practical alternative to using an image? I believe that the answer to this question has to be no. Not only does the colour gradient not appear for older browsers when this approach rather than a background image is used, but the code that needs to be added to the web page in order to apply this method will be much larger in size than a properly optimisedf background image to provide the same effect would be. This means that a web page that avoids using an image to provide a colour gradient background will be both slower to download (bigger files) and slower to render (repeating a background image to fill the required area will be much faster than running either the SVG code or Microsoft filter to generate the gradient).

This approach does give a few benefits though. The actual colours for the gradient are much easier to change since they are coded as plain text while to change the colours in a background image mean that you would have to recreate the image from scratch. Another benefit is that the colour gradient will still appear behind your content even when your visitor has disabled the display of images in their browser.I do not believe that these benefits are sufficient though to make it worthwhile taking this approach at the moment.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow