How to draw a background image correctly?

Question

css

Hello. Such a question is how to properly prepare background images for the site, especially for retina monitors. What size should the background image be, and is there any criteria for background images?

Answer 1

body {
    background-image: url("pic.png");
    background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    body {
        background-image: url("pic-2x.png");
    }
}

or like this :

body {
    background-image: url("pic.png");
    background-image: -webkit-image-set(url("pic.png") 1x, url("pic-2x.png") 2x );
    background-size: cover;
}

but in general, svg has proven itself excellent on retina, it’s better to read about it svg-art.ru