7

I asked a question about this that was specific to my code and people were really helpful, so I picked the answer that was more susccessful, even though I did not solve my problem.

  • I am trying to get a large css background just like livingsocial has.
  • I have an image that is 1400 x 1050
  • My current resolution is: 1280 X 1024
  • My image keeps getting cut off from the bottom

Question(s): Whats the best way to display large image backgrounds using css?

  • Do I need to have same background image in 4 different resolution and then use the image that best fits the current resolution user is using (is there some script for it)?
  • Do I need just one big image that I keep scaling using css
  • How are others tackling this problem?

I'm interested in knowing what is the best way to do this so that it works fine in all resolutions out of the three options above.

Community
  • 1
  • 1
yogashi
  • 273
  • 1
  • 5
  • 11
  • Generally you would have parts of the background unique but make sure that the edges are seamless so that resolution isn't a problem. To test if your design works zoom out the page. – Aram Kocharyan Aug 16 '11 at 17:06
  • An image of 1400x1050 when scaled to 1280 wide will be 960 high. Is that what you're seeing? – James Aug 16 '11 at 18:27
  • I don't know...but it is being cut off at the bottom. I have not scaled it yet. – yogashi Aug 16 '11 at 18:53

6 Answers6

4

CSS3 Solution You could use background-origin and background-size in CSS3, but it's not supported by IE8 and lower.

PHP Solution You could GD2 to scale the image specific to the users browser, this solution would also involve JavaScript.

Living Social Way They're inserting an image with the <img/> tag and positioning it fixed.

<style type="text/css">
#background {
    z-index: -1; /* put it under everything*/
    position: fixed; /* make it stay in the same place, regardless of scrolling */
    top: 0;
    left: 0;
    overflow: hidden; /* clip the image */
    width: 100%; /* fill the full width of browser */
    min-height: 950px; /* show at least this much of the image */
}
#background img {
    width: 100%;
}
</style>

<body>
    <div id="background"><img /></div>
    <div id="content"><!-- Your Content Here --></div>
</body>

Living Social has some more code applied to their <img/> tag, but it seems sort of redundant, perhaps it's for better cross-browser support, I didn't show it here.

  • thanks for explaining the CSS. However, trying their technique my image gets cut off from the bottom: http://jsbin.com/opokev/28 It might be the case because of `overflow: hidden` but what should be my resolution? should I scale down my image so it does not get cut off? – yogashi Aug 16 '11 at 17:19
  • `overflow: hidden` is what causes it to get cut off, as well as `position: fixed` the idea is that the background only takes up as much space as it needs, no more no less, this is what Living Social is doing. –  Aug 16 '11 at 17:56
  • Here's your code modified, using my example from my new answer. http://jsbin.com/opokev/33 –  Aug 16 '11 at 18:20
1

I am not aware of a CSS method that will achieve crossbrowser background.. that actually works in lower ie versions.

However there are some jquery plugins out there, like this one:

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

Joonas
  • 7,227
  • 9
  • 40
  • 65
0

Try specifying the img width and height, then if it's cut on the sides center the image. Otherwise, your image will be cut off depending on the screen size; Or stretched out, if you set the size of it to match the screen size.

bobek
  • 8,003
  • 8
  • 39
  • 75
  • CSS "background" doesn't allow you to specify the scaling size for the image. http://www.w3schools.com/css/css_background.asp – Louis Ricci Aug 16 '11 at 17:12
  • Correct. He wold have to actually use the HTML for that. – bobek Aug 16 '11 at 17:37
  • To be more accurate, CSS2 does not allow you to do that, CSS3 does. CSS3 is supported by all major browsers, including IE9. No support for IE8 and under though. –  Aug 16 '11 at 18:14
0

Google: css autosize background image http://css-tricks.com/3458-perfect-full-page-background-image/

Louis Ricci
  • 20,804
  • 5
  • 48
  • 62
0

I decided to answer this question again, given the different set of requirements, both are valid; however, this one specifically addresses if you DON'T want the image to be cut off at the bottom.

DEMO: http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css">
#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;    
}
#contentContainer {
    position: relative;
    width: 500px;
    height: 500px;
}
#theContent {
    /* this is all pretty much just to make it look good, nothing important in here */
    position: absolute;
    top: 200px;
    left: 200px;
    background: #FFF;
    width: 80px;
    height: 80px;
    opacity: 0.7;
    border-radius: 6px;
    padding: 10px;
}
</style>

<div id="contentContainer">
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
    <div id="theContent">This is the content</div>
</div>
0

I just stripped the code from living social and thought it would be handy if I put it here:

<div id="landing-page-container">
  <div id="background-container">
    <div>
      <img alt="background" id="background" src="files/background.jpg">

    </div>
  </div>

</div>
<div class="container"></div>

and here is your css:

html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}

and of course you need to supply your background.jpg

Adam Boostani
  • 5,999
  • 9
  • 38
  • 44