Results 1 to 1 of 1

Thread: Creating a (linear) gradient page background

  1. #1
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

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


    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.
    Last edited by techno_race; 08-14-2008 at 05:34 PM.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

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

    peter_budo (09-14-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •