CODEWITHSUNDEEP
htmlcssbackground-image
yogashi
yogashi

Reputation: 273

Whats a good way to show large background images on css

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.

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

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.

Upvotes: 7

Views: 3121

Answers (6)

Adam Boostani
Adam Boostani

Reputation: 6247

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

Upvotes: 0

Joonas
Joonas

Reputation: 7303

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/

Upvotes: 1

user888750
user888750

Reputation:

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>

Upvotes: 0

Louis Ricci
Louis Ricci

Reputation: 21106

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

Upvotes: 0

user888750
user888750

Reputation:

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.

Upvotes: 4

bobek
bobek

Reputation: 8020

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.

Upvotes: 0

Related Questions