Fading Background on websites?

Discussion in 'Web Design and Development' started by stevehp, Sep 19, 2006.

  1. stevehp macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    It's not a house, it's a home.
    #1
    Hi All,

    I am trying to figure out how to fade a background image into the normal background colour of the site...I know how to make the background file...ie - a file a few pixels high and wide, but how do I make sure when someone looks at the page on a giant screen the background doesn't repeat...here is an example...

    http://www.apple.com/ipod/nike/

    thanks so much!
     
  2. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #2
    You should use the no-repeat, repeat-x and repeat-y to achieve this...

    Se if this old thread is helpful: http://forums.macrumors.com/showthread.php?t=220400 :)

    Edit: Nevermind that old thread, do something like this (;)):

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <
    html>
    <
    head>
        <
    title>New Page</title>
        <
    style type="text/css">
            
    body 
                
    color#333;
                
    background#eee url(dill.gif) repeat-x;
            
    }
        </
    style>
    </
    head>
    <
    body>

    </
    body>
    </
    html>
    And use something like this image, a gif with a gradient made in Photoshop from Black to #EEE, the same as the background colour:
     

    Attached Files:

    • dill.gif
      dill.gif
      File size:
      2.1 KB
      Views:
      1,089
  3. stevehp thread starter macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    It's not a house, it's a home.
    #3

    ahhhh! Thanks so much.
     
  4. SBT macrumors member

    Joined:
    Apr 5, 2006
    Location:
    England
    #4
    If the page changes in height. Make sure the background colour is the same as the bottom colour of the gradient (as if it only repeating on the X axis then the image should stop but the text continue. Also you could make the background static ("fixed" as it is known) but problems may arise when people view the site with different screen sizes and resolutions.
     

Share This Page