SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Showing a Background Image to 100% of Visitor's Screen

    Hi everyone,

    I want to know how I can show the background image of the body section spread to 100% of the visitor's full screen with CSS, which sizes would vary upon different monitor/screen sizes. Is this possible and am I clear in what I'm asking?

    -Tyler

  2. #2
    SitePoint Member mapetshi's Avatar
    Join Date
    Jan 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can try this jquery plugins http://srobbin.com/jquery-plugins/backstretch/

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe that HTML5 and CSS3 has this capability. Check out W3schools.com's section on HTML5/CSS3, particularly the background size attributes. i think this is the right place...

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by etidd View Post
    Hi everyone,

    I want to know how I can show the background image of the body section spread to 100% of the visitor's full screen with CSS, which sizes would vary upon different monitor/screen sizes. Is this possible and am I clear in what I'm asking?

    -Tyler
    Well you could create a 5x5 (or something that small range) and tile it on the body to have it go across the entire viewport. Just make sure to repeat the image. Some images make it awkward to work with but that general technique should work well.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by etidd View Post
    I want to know how I can show the background image of the body section spread to 100% of the visitor's full screen with CSS, which sizes would vary upon different monitor/screen sizes. Is this possible and am I clear in what I'm asking?
    There are a couple of problems with what you're asking for.

    First – some browsers make a real pig's ear of resizing images, and they come out looking pixellated, uneven and generally messy. That isn't a look you want on your site. That's why we always recommend getting your image the right size before uploading it onto your website, rather than putting it on at the wrong size and then using HTML (or CSS) to resize it 'on the fly'.

    Second – something to think about, are you wanting it to stretch to fit horizontally or vertically or to the larger of the two (keeping the same proportions), or are you wanting it to fill the page exactly, however much it has to distort it? Let's say you have a background image that is 800600px as a starting point. Someone has a screen of 19201080, with two windows side-by-side. That will give an available space of approx 9401000. Do you want your image to scale to 1.175, so that it just fills the width (but leaves gaps top and bottom)? Or to 1.666 so that it fills the whole page (but you lose bits left and right)? Or do you want to change the aspect ratio from 1.333 to 0.94, making it 40% more stretched in one direction than the other, so that it exactly fits the page?

    (I'm not saying any one of those decisions is better than any other ... just that you do need to make that decision on what you mean by your question)

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I should also not use the whole photo because I need to lower the file size of the photograph. Then, I want the content to scroll over the middle white portion.

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by etidd View Post
    Yeah, I should also not use the whole photo because I need to lower the file size of the photograph.
    Good idea!

    Then, I want the content to scroll over the middle white portion.
    OK. You might just want to set your wrapper w/ a background-color and make that the "white portion".

    In general, I'd consider using a different background image or using a gradient to fade the image to a color that you can set as background-color.

    ~TehYoyo


Tags for this Thread

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
  •