Как правильно отрисовать фоновую картинку?

Question

[kamisarlapsha]

Всем привет. Такой вопрос, как правильно готовить фоновые изображения для сайта, особенно для retina мониторов. Каких размеров должно быть фоновое изображение, и есть ли какие-нибудь критерии для фоновых изображений ?

Comments

[Сергей delphinpro]

Двойного размера. как и другие растры для ретины.
Но большие фоны двойного размера можно сохранять в низком jpeg качестве, они норм будут выглядеть.

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");
    }
}

или так :

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

а вообще отлично на retina себя зарекомендовал svg , лучше это про почитайте svg-art.ru