SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with a footer gradient...

    Hey all,

    I'm designing a web page for my dad, and I'm trying to impliment a little CSS based on my cousin's recommendations. Here's a page:

    www.onefather.com/fll.html

    As you can see, I have a header running across that's a gradient. I want to do the same thing at the bottom, but it seems to ADD the gradient at the bottom, rather than just overlapping the current background. So it makes the page extra long.

    Here's the CSS for the footer:

    .footer
    {
    background-position: bottom;
    background-image: url(../images2/bottom_gradient.gif);
    background-repeat: repeat-x;
    width: 100%;
    height: 332px;
    border: 0px solid red;
    margin: auto;
    text-align: center;
    vertical-align: bottom;
    display: inline;
    }

    If anybody could help, I'd really appreciate it.

    ALSO, while I'm making this topic, I was wondering if this was at all possible. Making 2 side gradients, and having them run along the left and right ends of the page. What code would be required to do that?

    Thanks again guys!

  2. #2
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding also

    position:relative


  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd be better off attaching the top bg-image to the html and the bottom one to the body (or vice versa).


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
  •