Results 1 to 5 of 5
  1. #1
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Repeat fading background

    I searched the Lounge and did see many posts on duplicating backgrounds via CSS but none of the solutions worked for me with a fading graphic (one that fades from one color to another). I want to duplicate what I see on http://www.lexmark.com and I even grabbed their background .gif but can only get it to repeat-x or repeat-y which isn't what they've done (the black stays on top, while the red stretches down the page).

    I'll make own faded graphic (not want to steal theirs) but how can I get the same affect they have?

    Thnx,
    Deb

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Repeat fading background

    In the Lexmark page, the background-color is set to match the color at the bottom of the background image.

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Repeat fading background

    Hi Deb

    As Jeff states the background colour is the same as the very last pixel colour at the base of the image. The graphic is ( as you will probably know) is 10px X 320px and repeats horizontally and fixed to the top of the HTML page. the CSS is:

    body {
    background: #900 url(bg.gif) repeat-x scroll top left;
    padding-bottom: 50px; float: left;
    padding-top: 150px; padding-left: 40px;
    }

    Where the image is called bg.gif
    Jerry

  4. #4
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Repeat fading background

    Thanks for the CSS details. I did try making the background the same color as the reddish part but grabbed the wrong part of the faded red. The reds didn't match and it looked bad so I'll try grabbing the color off the very end of the bar. I don't know what the other CSS padding statements do in your sample but will read up on it and see what I come up with.

    Thanks for the help.
    Deb

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Repeat fading background

    You can get rid of:

    padding-bottom: 50px; float: left;
    padding-top: 150px; padding-left: 40px;

    It just gets the text and other contents padded 150 px from the top and bottom and 40 px on the left. I would put those in another div so as to control it more.

    The Hex is #900000 or the RGB is (144,0,0)
    Jerry

Posting Permissions

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