Centering a full screen background image with CSS

Something I’ve found myself doing a lot of lately is creating websites where I want a single image as the entire page background. All of the page content sits on top, and the image never moves, no matter how much content scrolls down the page. I need it to be responsive and always stay centered, no matter what size screen or type of device the site is being viewed on. It’s also important the the image doesn’t distort. Often the background has an opacity less than 1 to some degree, maybe depending on what the image is and how the content fits with it.

As it turns out, this was something that I found pretty difficult to get right, and not many working examples of it came up in my googling. An example of the end product can be seen at family.weavercrawford.com, and I’ve since used this method on Breagh.ca also.

All we need is a background div at the start of the body content, with a little magic CSS

<html>
    <head></head>
    <body>
        <div id="background-div"></div>
        <div id="content">
            ...
        </div>
    </body>
</html>

#background-div {
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(http://family.weavercrawford.com/wp-content/uploads/2014/10/AlexStevePrint-52.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
    opacity: 0.7;
}

Obviously, alter the image URL & opacity to suite your site!