Creating a (linear) gradient page background

**techno_race** · 08-13-2008, 06:21 PM

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:

Step 2.
Resize the gradient.
In Photoshop, use the 'Image Size' dialog (Under the Image menu, Ctrl-Alt-I)

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:

HTML Code:

<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:

HTML Code:

<div id="apDiv1"><img src="[I]background.gif[/I]" width="100%" height="100%"></div>
<div id="apDiv2">[I]CONTENT[/I]</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

Code:

body,td,th {
	background-color: #RRGGBB;
}

on a new line before #apDiv1 { where RRGGBB is the bottom color of your gradient.

Step 4.
Test.
This works well with Internet Explorer, Firefox, Flock, and Safari.
But not with Amaya or Opera.

EDIT: I am currently updating and maintaining this tutorial here.

Thread: Creating a (linear) gradient page background

Thread Tools

Search Thread

Creating a (linear) gradient page background

The Following User Says Thank You to techno_race For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions