Category: Coding tips & tutorials threads
Creating a (linear) gradient page background
This is actually a simple concept. That few people understand.
YOU WILL NEED
________________
HTML editor
(This tutorial uses Dreamweaver CS3)
CSS editor
(Dreamweaver CS3)
Image editor other than Paint :p
(Photoshop CS3)
Web browser(s)
Step 1.
Make a gradient.
This is fairly simple, even if you don't have a gradient tool.
Personally, I hate Photoshop's gradient tool (when I'm trying to do this :))
So, here's an alternative.
Actually, you really can't use a gradient tool, as that makes a wide image.
You can only use linear gradients with this. (Radial or complex gradients would take up too much space.)
Design a gradient using the 'Pixel' technique.
Example:
http://www.seangillen.com/pixel.gif
Step 2.
Resize the gradient.
In Photoshop, use the 'Image Size' dialog (Under the Image menu, Ctrl-Alt-I)
http://www.seangillen.com/resize.gif
1. Uncheck the 'Constrain Proportions' checkbox
2. Check the 'Resample Image' checkbox
3. Set 'Resolution' to 72 ppi (pixels/inch)
4. Set 'Height' to 10000 pixels
5. Choose 'Bicubic' from the menu.
Step 3.
Make the webpage.
Make a blank webpage.
1. Insert the following in the <head> section:
<style type="text/css">
<!--
#apDiv1 {
position: fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
}
#apDiv2 {
position: absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:2;
}
-->
</style>
2. Insert the following in the <body> section:
<div id="apDiv1"><img src="background.gif" width="100%" height="100%"></div>
<div id="apDiv2">CONTENT</div>
where background.gif is the URL to your background image.
Insert your page's content in the CONTENT area.
3. Note that this background will scroll with the page.
If your background is vertical (the bottom is a solid color all the way along), you can change this. To do so, change position: fixed; to position: absolute; and add
body,td,th {
background-color: #RRGGBB;
}
on a new line before #apDiv1 { where RRGGBB is the bottom color of your gradient.
http://www.seangillen.com/scroll.gif
Step 4.
Test.
This works well with Internet Explorer, Firefox, Flock, and Safari.
But not with Amaya or Opera.
http://www.seangillen.com/browsers.gif
EDIT: I am currently updating and maintaining this tutorial here (http://www.seangillen.com/grad/).