know of a good CSS-technique for a full-screen background image?

Question

i've look around online and tried various ways to go about this, but haven't managed to find one technique that works for me. i'd like my website's background image to be centered, fill the entire browser screen, and work with responsive design.

is there an easy technique, besides the CSS3/background-size: cover? that just didn't work at ALL for me (not sure why...).

here's a link to what i posted a short while ago. it explains what's happening with the current technique i'm using...http://stackoverflow.com/questions/15604771/why-are-the-top-and-bottom-of-my-websites-background-image-being-cut-off-full — manh2244, Mar 24 '13 at 23:27
i don't have any reason to avoid img tags, so feel free to suggest something! — manh2244, Mar 24 '13 at 23:28
does this answer work for you? http://stackoverflow.com/questions/15594116/html-css-div-and-background-image/15594176#15594176 — Offbeatmammal, Mar 24 '13 at 23:29
no, when i try that, i just get a white background. using the most current version of Chrome, so not sure why it's not working... — manh2244, Mar 24 '13 at 23:35
actually, i was able to get the image to show up, it's just cut off at the top and bottom, like i experienced before. — manh2244, Mar 24 '13 at 23:39

Roko C. Buljan · Answer 1 · 2013-08-14T13:28:46.000

3

LIVE DEMO

body{
  background:url(img.jpg) center center fixed;
  background-size:cover; // CSS3 *
}

^Note: CSS3. For other old browsers please make it as ugly as possible! ;)

edited Aug 14 '13 at 13:28

answered Mar 25 '13 at 00:39

Roko C. Buljan

196,159
39
305
313

Aaron · Accepted Answer · 2013-03-25T00:35:36.500

2

If you're not opposed to a solution involving HTML in addition to CSS, you can simulate the background-size: cover behavior with an img tag.

HTML:

<body>
    <div id="image-matte">
        <img src="..."/>
    </div>

    ... Page content below ...

</body>

CSS:

#image-matte {
    position: fixed;
    top: 0%;
    left: -50%;
    width: 200%;
    height: 200%;
}

#image-matte img {
    display: block;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

EDIT: To get a vertically AND horizontally centered background image, you'll need to create a table/table-cell relationship between the wrapper div, and an inner div that holds the image itself... The HTML and CSS would look like this:

HTML:

<div id="image-matte">
    <div>
        <img src="..."/>
    </div>
</div>

CSS:

#image-matte {
    position: fixed;
    display: table;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    text-align: center;
}
#image-matte div {
    vertical-align: middle;
    display: table-cell;
}
#image-matte img {
    position: relative;
    text-align: center;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Working example: http://jsfiddle.net/qkpvb/

edited Mar 25 '13 at 00:35

answered Mar 24 '13 at 23:44

Aaron

5,137
1
18
20

this is closer to what i'm trying to achieve. the image was still pushed 50% to the left (with the left half out of view) and white space occupying the right half of the screen. i fixed this by removing the absolute positioning, but do i want to be doing that? after making this change, the top was fixed, but the bottom part of the image was still being cut off... – manh2244 Mar 24 '13 at 23:55
oops, I had a couple rogue CSS width and height properties. I've edited my answer to remove them. – Aaron Mar 25 '13 at 00:03
ahh...thanks for the update and for fixing. i am getting SO close. image is now fitting nicely, except some shoes are getting cut off at the very bottom. i've played around with some different options using the debugging tool, but nothing has worked so far. currently using a 1100x800px image, but have it in other sizes as well. is this a resolution issue? – manh2244 Mar 25 '13 at 00:14
This is because the top of the image is aligned to the top of the viewport. In order to have a TRULY centered image, you'll need to use `display: table` and `vertical-align: middle`. Let me create a jsfiddle demonstrating this behavior. – Aaron Mar 25 '13 at 00:29
I see...tried applying those to the image, but this didn't work. I then tried applying them to the #image-matte div, just in case you meant that, which also didn't work. then i figured i should just wait for you to create the jsfiddle... – manh2244 Mar 25 '13 at 00:39
even closer...the top and bottom are still both slightly cut off, but not as much as before. it's almost as if all this now needs is for the view port to be "zoomed out" so that the entire image is visible. it's definitely centered vertically and horizontally, though. – manh2244 Mar 25 '13 at 00:59

score 0 · Answer 3 · answered Mar 26 '13 at 11:07

To work nice on all browsers, I'd suggest this solution using jQuery :

HTML

<img src='./templates/lights3.jpg' alt="bg" id="bg"/>

CSS

#bg { 
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: -5000; // Yes I always overdo ^^ (that's not very clean)
}

.bgwidth { 
    width: 100%;
}

.bgheight { 
    height: 100%;
}

JQUERY

$(window).load(function() {    
var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();              
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }           
}                           
theWindow.resize(resizeBg).trigger("resize");
});

This solution would be responsive and resize your background image relative to the size of browser window.

yes, I have found a solution .. a jquery plugin called Supersize . it is actually a full background slide show plugin but it has a slimmed down option to use as only a full-screen background image stretcher. Works on all browsers I've tried including mobile — CI_Guy, Jun 14 '13 at 14:48

score 0 · Answer 4 · answered Sep 25 '14 at 09:09

0

Try to add this html tag inside tag or css in the link:

<img src="img/beach.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg

answered Sep 25 '14 at 09:09

Tony Wu

1,040
18
28

know of a good CSS-technique for a full-screen background image?

4 Answers4

Linked