SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face CSS3 Linear Gradient background

    Hello there.

    I'm trying to put a linear gradient background on the body of this website:
    http://www.ijacobs.com/trial/html/index.html
    However, it only runs part way down the screen as you can see. I've tried various ways of sizing the background but can't find anything that works.
    I obviously want it to cover the viewport, so hopefully one of you out there will make me feel foolish with a simple solution.
    I'd prefer to say, "Why didn't I think of that", rather than tear my hair out any more today.

    Thanks in advance.

  2. #2
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, not a lot of help there then.

    For anyone who comes upon the same problem, I solved it by putting a wrapper around the header and putting the background gradient inside it. I didn't want to use an extra div and I still don't understand why it should be necessary, but there you go.

    I positioned the header inside the wrapper by making it position: relative and using top:4em and margin:auto.

    At least now it works.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry we missed your post

    Looks as though the main problem was that you didn't set the height of html to 100%.
    eg. You had this:

    Code:
    html body{height:100%}
    and it should be :

    Code:
    html, body{height:100%}
    There would still be a missing background if a vertical scroll was induced and the you'd need to set the min-height of the body in pixels to match your centered element.

  4. #4
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I'll re-arrange it.
    That's another comma I'll never forget again (I hope).


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
  •