Home/ Questions/Q 6318205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T15:36:50+00:00

I asked a question about this that was specific to my code and people

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0