Automatic background image resizing based on resolution

Question

this is the problem: I would like to have a CSS code that allows me to resize automatically the background of my website, based solely on the resolution of the pc used.

This means, for example, that the image will not be resized if the user resizes the browser window (not like the .stretch value, to be clear).

Answer 1

This will give you a responsive background with only CSS:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This would be a responsive image with CSS only. If you want to change images per screen size, throw that declaration inside a media query.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}

For more info you can view this Q&A:

Responsive backgrounds with Twitter Bootstrap?

If you do NOT want a responsive image, just remove the CSS3 declarations from the html selector:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;
}