Почему теряется качество фоновой картинки?

Question

Вставлю картинку png (1920x1080) в background и теряется качество картинки. Почему так происходит.  Помогите исправить

.container{
background-image: url(images/background-photo.jpg);      
background-position: center center;      
background-repeat: no-repeat;      
background-attachment: fixed;      
background-size: cover;
}

Coder · Answer

Кстати, cover лучше прописывать и для остальных, если что:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;

Есть решения другие - например,

ставить бОльший размер. 
Использовать решения интерполяции (правда, поддержка еще не везде ахти)

image-rendering: -moz-crisp-edges; /* Firefox */
-ms-interpolation-mode: nearest-neighbor;  /* IE */
image-rendering: crisp-edges; /* Стандартное свойство */

Попробовать svg - правда, тут есть моменты...
Попробовать, в комплексе, оптимизацию графики для Retina-экранов через соотношение между физическими и CSS-пикселями (device-pixel-ratio)

Конечно, в идеале, вообще-то, вектор и только вектор дает безграничные возможности масштабирования.

В общем, получается - нужно давать картинку нужного заведомо большего размера для большинства предполагаемых отображений/устройств.

Почему теряется качество фоновой картинки?

One Answer

Add your own answers!

Ask a Question