Как сделать фоновую картинку в css
Перейти к содержимому

Как сделать фоновую картинку в css

  • автор:

background-repeat

Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

Интерактивный пример

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).

Синтаксис

/* Ключевые слова */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /*Два значения: горизонтальное | вертикальное*/ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* Глобальные значения */ background-repeat: inherit; background-repeat: initial; background-repeat: unset; 

Значения

Следующие однозначные имеют двухзначные эквиваленты:

repeat-x тоже самое, что и repeat no-repeat
repeat-y тоже самое, что и no-repeat repeat
repeat тоже самое, что и repeat repeat
space тоже самое, что и space space
round тоже самое, что и round round
no-repeat тоже самое, что и no-repeat no-repeat

В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.

repeat Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
space Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space .
round Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeat Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством background-position .

Примеры

HTML

ol> li> no-repeat div class="one"> div> li> li> repeat div class="two"> div> li> li> repeat-x div class="three"> div> li> li> repeat-y div class="four"> div> li> li> repeat-x, repeat-y (multiple images) div class="five"> div> li> ol> 

CSS

/* Совместно для всех DIVS в примере */ li  margin-bottom: 12px; > div  background-image: url(starsolid.gif); width: 144px; height: 84px; > /* повторение фона CSS */ .one  background-repeat: no-repeat; > .two  background-repeat: repeat; > .three  background-repeat: repeat-x; > .four  background-repeat: repeat-y; > /* Несколько изображений */ .five  background-image: url(starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; > 

Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat .

Спецификация

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-repeat
Начальное значение repeat
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется нет
Обработка значения список, каждый элемент которого содержит 2 ключевых слова, по одному на размер
Animation type discrete

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 13 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Background-size: масштабирование фонового рисунка

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

Значения background-size

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

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

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

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

background-size: 250px auto;

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

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

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

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

    background-size: 300px 300px;

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

    background-size: 300px 300px

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

    background-size: auto 50%

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

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

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

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

    CSS background-image

    Нередко появляется необходимость добавить фоновую картинку ко всей веб-странице или отдельному ее элементу. Чтобы это сделать, существует свойство css background image. Также с его помощью можно сделать градиент фоном, то есть, плавный переход от одного цвета к другому.
    Возможные значения свойства:

    1. url(‘URL’) – местонахождение картинки. Можно подгрузить изображение с сервера или другого сайта.
    2. none – отсутствие фонового изображения. Это значение выставлено по умолчанию. Также можно убрать фоновое изображение с помощью JS, присвоив свойству background-image это значение.
    3. initial – делает фоновую картинку изображением по умолчанию.
    4. inherit – наследует свойство родителя.

    Пример использования свойства.

    div /* фон контейнера div */ table /* радиальный градиент таблицы */ p /* линейный градиент абзаца */

    Что свойство не может

    Прозрачность фонового изображения через свойство background-image не реализуется. Можно сделать обычную картинку прозрачной, вставив ее предварительно через HTML, после чего наложить на нее текст или другой контент посредством CSS.
    То же касается и повтора фонового изображения. За это отвечает совсем другое свойство – background-repeat. Например, можно сделать повтор с помощью кода background-repeat: repeat-x (или y, если требуется сделать повтор фоновой картинки по вертикали). Если нужно убрать повтор, выставляется значение no-repeat.
    Нет у свойства background-image возможности масштабировать фон, за эту возможность отвечает background-size. С помощью него можно растянуть или сжать фоновую картинку. Чтобы сделать это применительно ко всей странице, необходимо прописать такой код.

    body

    Управление фоновым изображением через jQuery

    Если необходимо изменить фоновое изображение страницы или элемента с помощью библиотеки jQuery, то это можно сделать с помощью метода .css().
    Синтаксис следующий:
    .css(‘backgroundImage’,’url(images/example.jpg)’); Первый параметр функции – свойство, которое мы хотим изменить. Второй – значение, которое нужно выставить.

    Распространенные ошибки

    Что делать, если свойство css background-image не работает? Причина, как правило, кроется в пути к изображению. Раньше была еще одна распространенная ошибка – неуказание вендорных префиксов, если хотелось сделать красивый градиентный фон. Но сейчас большинство браузеров уже поддерживает плавные переходы от одного цвета к другому. В любом случае, рекомендуется в таком случае выставлять вендорные префиксы:

    1. -o- (браузер Opera).
    2. -webkit– (браузеры, базирующиеся на этом движке, в частности: Safari и Chrome).
    3. -moz- (Firefox).
    4. -ms– (Старые версии Internet Explorer)

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

    body

    Но с каждым годом необходимость использования вендорных префиксов для создания радиальных градиентов становится все ниже.
    Вторая ошибка – использование неправильного адреса. Нередко начинающие веб-разработчики не понимают, почему не выставляется фоновое изображение. А причина в том, что если css файл находится во вложенной папке, а картинка – вместе с HTML документом, то при определении изображения фона таким образом: background-image: url(image.jpg) браузер по умолчанию ищет изображение в той же папке, что и css-файл. Чтобы исправить эту проблему, необходимо указать путь на один уровень ниже: background-image: url(../image.jpg). Обычно этого достаточно, чтобы решить проблему с выставлением фонового изображения.

    Как изменить размер фонового изображения с помощью CSS3

    Размер фонового изображения может быть изменен и масштабирован. В CSS2.1 фоновые изображения, применяемые к контейнеру, сохраняют свои фиксированные размеры. К счастью CSS3 ввел свойство background-size, которое позволяет растянуть или сжать фон. Оно идеально подходит, если вы используете методы адаптивного веб-дизайна для создания шаблонов.

    Здесь можете найти разные методы:

    Абсолютное изменение размера

    Когда мы устанавливаем фоновое изображение, ширина и высота изображения по умолчанию устанавливаются в «auto», которое сохраняет оригинальный размер изображения. А если необходимо изменить размер изображения, могут быть использованы абсолютные измерения для установления нового размера (px, em, cm и др).

    Измерения высоты могут быть применены, используя свойство background-size с абсолютным измерением.

    При изменении размеров изображения пропорции (видимая область и форма отображения) должны быть сохранены. В противном случае, изображение может искажаться и терять качество.

    Давайте рассмотрим пример фонового изображения с измененным размером:

    Пример

    html> html> head> title>Фоновое изображение с измененным размером title> style> .resized < width: 400px; height: 300px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 300px 200px; background-repeat: no-repeat; border: 1px solid #999; > style> head> body> h2>Фоновое изображение с измененным размером h2> div class="resized"> div> body> html>

    Относительное изменение размера с помощью процентов

    Использование процентных значений может быть довольно полезным при адаптивном дизайне. Когда используется процентное значение, размеры основываются на элементе, а не изображении. Если свойство background-size установлено как «100% 100%», фоновое изображение будет растянуто таким образом, чтобы оно заполняло всю область контента.

    Пример

    html> html> head> title>Фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 100% 100%; background-repeat: no-repeat; border: 2px solid #999; > style> head> body> h2>Фоновое изображение с измененным размером h2> div class="resized"> div> body> html>

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

    Максимальное масштабирование размера

    Когда свойство background-size установлено в значение «contain», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло область контента. Но пропорции изображения (отношение высоты и ширины) будут сохранены.

    Значение «contain» указывает, что фоновое изображение будет масштабировано независимо от размера контейнера таким образом, что каждая сторона была максимально больше, не переходя длину контейнера с соответствующей стороны.

    Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но размеры контейнера не могут быть больше ширины и высоты.

    Пример

    html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-repeat: no-repeat; background-size: contain; border: 1px solid #999; > style> head> body> h2>Адаптивное фоновое изображение с измененным размером h2> p>Измените размер браузера и увидите результат: p> div class="resized"> div> body> html>

    Заполнение фоном

    Когда свойство background-size установлено в значение «cover», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло всю область контента. Изображение будет масштабировано, чтобы заполнить контентную область, но оно будет обрезано, если соотношения сторон различаются.

    Пример

    html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; border: 1px solid #999; > style> head> body> h2>Адаптивное фоновое изображение с измененным размером h2> p>Измените размер браузера и увидите результат: p> div class="resized"> div> body> html>

    Установление разных фонов для разных устройств

    Огромное фото на большом экране будет смотреться идеально, но на экране маленького устройства оно не будет таким эффектным. Тогда зачем загрузить большое фото, если вы все равно должны уменьшить его?

    Можно использовать мультимедийные запросы для отображения разных изображений на разных устройствах.

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

    Пример

    html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> /* For width smaller than 400px: */ body < background-repeat: no-repeat; background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"); > /* For width 400px and larger: */ @media only screen and (min-width: 400px) < body < background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg"); > > style> head> body> p style="margin-top:220px;">Измените ширину браузера, и фоновое изображение изменится при 400px. p> body> html>

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

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