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)

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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