Как на ретина-дисплеях установить повторяющийся фон?

Question

[Денис Букреев]

Такие дела.

Только при покупке макбука с ретиной я понял, что никогда не заботился о фонах для ретина-дисплеев.
С обычными неповторяющимися картинками все понятно.
Но что делать с повторяющимися бесшовными фонами?
Для них нельзя взять вдвое большую картинку задать bgsz: 100%/cover/contain и наслаждаться жизнью.

Как быть тогда?

Answer 1

[Павел Радьков]

Надо прописывать два фона — обычный, и «ретина» через медиа-запросы:

.something {
    background-image: url(path/to/[e-mail]);
}
@media screen and (min-resolution: 2dppx) { 
     .something {
        background-image: url(path/to/[e-mail]);
    }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/M...

Comments

[Денис Букреев]

и в чем соль?
второй фон так же будет показываться на ретине размыто и будет вдвое больше

[Павел Радьков]

Так ведь есть background-size.

- cover и contain сработают, как ожидается — вы ведь в прямоугольник того же размера вписываете вдвое больший фон, что приведет к удвоенной плотности пикселей.
- для повторяющихся фонов указывайте размер в пикселях, какой должен быть у @1x картинки.

[Денис Букреев]

Павел Радьков: но это такое, особенно если фон динамически меняется (как у меня в проекте)
больше на костыль похоже)
но другого выбора, видимо нет