Background size cover что это: Свойство background-size — размер картинки фона

css3 — background-size: cover — не правильно работает на мобильных девайсах

Вопрос задан

Изменён 6 лет 4 месяца назад

Просмотрен 7k раз

Здравствуйте, уважаемые знатоки! Такая проблемка: на некоторых мобильных девайсах, фон прорисовывается не полностью…

    .header {
  height: 565px;
  background: url(/style/client/img/bg.png)no-repeat top center;
  background-size: cover;
}

скрин: http://prntscr.com/781vxs В чем может быть проблема и как ее решить?

  • css3
  • адаптивная-верстка

Попробуйте такой варинат

.header {
    background: url(...) no-repeat top center; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }

У меня заработало после того как я убрал свойство background-repeat: no-repeat; В принципе оно и не нужно при background-size: cover;

Обычно такое происходит, когда используется width: 100% у фоновой картинки или у родительского элемента. Т.к. такая ширина будет рассчитана на основе ширины экрана на устройстве в вашем случае.

На странице у вас видимо есть элемент, у которых width больше чем 100% (ширина экрана) и есть возможность прокрутить контент влево/вправо (может быть лишний padding или margin стоит, или фиксированная ширина у какого-то элемента есть).

Чтобы от этого избавиться добавьте min-width для фона равную минимальной ширине, которую хотите установить, или поправьте элементы, которые вылезают.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

масштабируем фон — учебник CSS

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

  • auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

    
    background-size: auto auto;
    

    …то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:

    
    background-size: 250px auto;
    

    …то высота фоновой картинки будет вычисляться автоматически.

  • contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.




  • cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.




Числовые значения

Как мы уже сказали, размер фонового рисунка можно определять с помощью значений, указанных в пикселях, процентах и других единицах измерения CSS.

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:




Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:



Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике.

Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.


Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Размер фона: обложка; — Общее — Форум

WillPrice (Воля)

#1

Здравствуйте.

У меня не получается заставить очень простое фоновое изображение работать должным образом. У меня есть изображение, прикрепленное к тегу Body с установленным на обложку, по центру. Нет рабочего.

40227×513 18,2 КБ

Обрезается внизу на мобильных устройствах и планшетах. Если изменить размер браузера на десктопе, тоже отрубается.

Вот моя ссылка на общий доступ…
https://preview.webflow.com/preview/willholdingpage?preview=7700fbc54e57363de78de9979445c75f

Может кто-нибудь взглянуть и сообщить мне, что я делаю неправильно?

Заранее спасибо
Уилл

garymichael1313 (Г.Дж.)

#2

Высота изображения всего 1080 пикселей. Другой 1122. Контент на планшете выше по вертикали.

ВоляЦена (Воля)

, 23:42

#3

А, я думал, что он просто растянется, если я добавлю его в тег Body независимо от содержимого.

Есть ли способ добиться этого без использования массивного фонового изображения?

Извините, HTML не моя тема.

(Г.Дж.)

#4

  1. Если вам нужно использовать это изображение, оно должно быть больше содержимого.
  2. Если нет, я бы использовал векторную графику SVG. Растушуйте его немного. Затем экспортируйте его в большом размере и оптимизируйте, чтобы он был сжат. Добавьте это.

Когда дело доходит до полного фона, вариантов не так много. Вот почему большинство дизайнеров используют градиенты или векторы.

ВоляЦена (Воля)

#5

Понял. Спасибо за ответ Гэри.

(Г.Дж.)

#6

Нет проблем, берегите себя и получайте удовольствие!

ВоляЦена (Воля)

#7

Я мог бы вместо этого написать код вручную. ..
Хитрости CSS

Это довольно примитивный макет, но, похоже, его сложно реализовать в веб-флоу.

У меня это работает с разными точками обзора (сортировка), используя «авто», а не «укрытие». «Размер фона: обложка» не совсем соответствует ожиданиям.

Если кто-то добился этого в веб-флоу, дайте мне знать.

система (система) Закрыто

#8

Эта тема была автоматически закрыта через 125 дней после последнего ответа. Новые ответы больше не допускаются.

tachyons-background-size / Theming / Docs / ТАХИОНЫ

tachyons-background-size / Theming / Docs / ТАХИОНЫ Тахионы

v4.12.0

Скины Парит Размер фона Границы Радиус границы Коробчатая тень Непрозрачность

Размер фона

Background-size влияет на то, как фоновые изображения заполняют содержащиеся в них элементы. Хотя измерения могут быть объявлены явно для определения размера изображения, значения кажутся наиболее пригодными для повторного использования: содержат и закрывают .

Examples

.contain { background-size: contains }

contains гарантирует, что все изображение отображается внутри элемента, независимо от размеров элементов.

.cover { background-size: cover }

cover обеспечит покрытие всего элемента, но не гарантирует, что будет показано все изображение.

Ховерс

Следующий
Бордюры

Артикул
MDN — Размер фона
тахион-фон-размер
v5.0.5 136 Б
Декларации
8
Селекторы
8
Макс.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *