Backgrounds

Discussion in 'HTML & Website Design' started by heather0407, May 8, 2007.

  1. #1
    I am having trouble deciding on a background for my site. I think I would like to have a simple color background.. was thinking starting with white and then slowly changing into red... with all pinks etc on the way.

    I was wondering how I would do this. Is there a code that I can use or would I have to use a image file??

    Thanks!
     
    heather0407, May 8, 2007 IP
  2. JPRuss

    JPRuss Peon

    Messages:
    119
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Sounds kinda cool. Not sure exactly what your mean though.

    If the background 'fades' but is still a 'static' image then I would probably use a background image.

    If the color fades over time, you might be able to use an animated gif (though I've never tried it just off the top of my head)

    Otherwise you would probably need some javascript code to make it work.

    Not sure if that helps or makes things even MORE confusing, if the latter sorry.
     
    JPRuss, May 8, 2007 IP
  3. heather0407

    heather0407 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I dont mean an animation... just the color changes down the page from white to pink to red at the end... the color changes as you look down the page... but not animated... does that make sense?
     
    heather0407, May 8, 2007 IP
  4. DecisionsIN

    DecisionsIN Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just create a 10 x 1000 (width x height) image in Photoshop (or prefered design program) and fill it with a 90 degree (vertical) gradient using the colors of choice. I would recommend sticking with the same color pallete (e.g. red/light red, pink/light pink). Once you have the image created save it as a JPG at around 60% quality. Then use CSS to display it and repeat it across the entire width of the browser. You would want to add the CSS to your body tag or to an outer DIV tag. It would look something like this:

    
    body {
        background:url(IMAGE PAGE) #COLOR repeat-x;
    }
    
    Code (markup):
    Replace, COLOR with the bottom gradient color. This will cause a smooth transition.

    We use a simple gradient background on DecisionsIN.com. Check it out or glean the code. Really pretty simple once you get the hang of it. If you have questions let me know.
     
    DecisionsIN, May 8, 2007 IP
  5. heather0407

    heather0407 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks so much. Good Idea.... Ill try it.. and let you know if I have an issue

    So glad I found this forum... everyone is so helpful!
     
    heather0407, May 8, 2007 IP
  6. heather0407

    heather0407 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I figured it all out... Thanks for your help!
     
    heather0407, May 8, 2007 IP