0

Вставлю картинку 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;
}
5
  • 2
    Теряется из-за cover - пиксельная картинка растягивается, потому так.
    – Coder
    21 авг 2019 в 16:39
  • а что делать тогда ?
    – XXXXXX
    21 авг 2019 в 16:46
  • Что делать зависит от того, какой нужен результат. 21 авг 2019 в 17:00
  • @Эникейщик чтобы был фон без потери качества
    – XXXXXX
    21 авг 2019 в 17:02
  • Тогда background-size: auto;. Изображение будет показано в оригинальном размере. Но часть его будет невидна или же часть экрана останется без фона (если экран больше 1920х1080). 21 авг 2019 в 17:05

1 ответ 1

1

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

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

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

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

    image-rendering: -moz-crisp-edges; /* Firefox */
    -ms-interpolation-mode: nearest-neighbor;  /* IE */
    image-rendering: crisp-edges; /* Стандартное свойство */
    
  3. Попробовать svg - правда, тут есть моменты...

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.