SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Background Resize

    Hi

    I'm trying to find a way to make a background image resize vertically, so you always see the full height of the image and it always fills the viewport. It needs to resize proportionally but it doesn't matter if it fills the screen horizontally or not.

    I've managed to do a background resize, but it just makes the image fill the screen horizontally, and loads of it gets cut off at the bottom.

    I'm using this: Anystretch but have tried other methods, none of which seem to work.

    Would be nice to do it with pure CSS, but I'm not averse to Javascript.

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    CSS won't be able to do this nicely, but you could set an <img> in the HTML, AP, top:0;left:0; and set the width/height to 100%

    It will scale horribly probably and look very very bad in many resolutions, but there you go.

    Edit-I don't know if above will remain true if the user resizes the browser window, though I can't be bothered to go check right now. I think it'd still be true.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It does actually scale fine if I don't put anything at all for the width. Just realised that trying to make it behave as a background image is a bit dim though, as I don't actually want the content to flow over the top of it when I resize. Maybe some media queries will save the day.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you wrap everything on the page in a wrapper, and give that position:relative;z-index:1;, there is no way that the image could overlap the content.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent. Any way to fix the position of the image so it doesn't scroll with the content?
    Thanks

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You'd need to set it with position:fixed instead of position:absolute

    However it won't work in IE6, if you still care about that browser. You'd need expressions or another JS solution
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course Thanks very much for your help.
    I'm not sure I do still care about IE6, no.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •