Full Screen Strethching Background Image CSS

A quick tip on how to add a full screen background image with only HTML and CSS, no JavaScript required. This technique works great with responsive websites and various aspect ratios.

full screen strethching backgroundimage css

Add the image to top of your HTML document after the opening <body> tag, assigning the bg class to it.

<img src="filename.jpg" alt="bckgound" class="bg" />

Complete the CSS file with the .bg class. We can add a responsive break point at 1024 pixels.

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px){
    img.bg {
    left: 50%;
    margin-left: -512px; }
}

The background image will take up the whole screen, pushing the content below on the page. Make sure you adjust the content below, positioning it above the background image.