SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Boot Straps's Avatar
    Join Date
    Aug 2005
    Location
    In the flat lands of Montana(USA)
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 100% height with .png

    Hello,
    How do I get the background image to be 100% height. My image is 700px height and 20 px width and is Linear on the height side, so no repeat for y. I read http://www.sitepoint.com/forums/show...ghlight=height but it did not work for me.

    Thanks for any help
    Boot Straps
    Boot Straps

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't stretch a background image; the only way to get it to be 100% high is to tile it vertically using "repeat-y".

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way you could achieve this is to have a further wrapper div that contains your entire page. If you then make this 100% height and width, drop it below (z-index wise) the rest of your page, and then add an image inside this div that has 100% width and height applied. This will make the image re-size according to the size of the wrapper div (and therefore the browser size) - but I'd imagine the results to look a little strange with the images dimensions being pulled and squashed...

  4. #4
    SitePoint Enthusiast Boot Straps's Avatar
    Join Date
    Aug 2005
    Location
    In the flat lands of Montana(USA)
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whintersby,
    Can u give an exmple of the 'z-index' thing.

    What about this: A table height = 100% with all 4 margins = 0px.

    Or: A Linear background image and under it, a background color to fill where the image is not.

    Im new to CSS but want to learn.

    Thx,
    Boot Straps
    Boot Straps

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    a blast from the past

    absolute positioned containers and 100% high images left and right

    2 indians

  6. #6
    SitePoint Enthusiast Boot Straps's Avatar
    Join Date
    Aug 2005
    Location
    In the flat lands of Montana(USA)
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds,
    I like the 2 indians page, but want I want it to do is 100% high even when you need to scroll down the page. Is that possible?
    Boot Straps

  7. #7
    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)
    Or: A Linear background image and under it, a background color to fill where the image is not.
    If you just want a background fade then apply the image to the body.

    e.g.
    http://www.pmob.co.uk/temp/gradient2.htm
    http://www.pmob.co.uk/temp/bgimages.htm

    If you don't want the fade to repeat then just change the repeat to repeat-x and then the background colour will be applied at the end of the image (assuming you are doing a fade into background effect.)


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
  •