CSS background-image
Нередко появляется необходимость добавить фоновую картинку ко всей веб-странице или отдельному ее элементу. Чтобы это сделать, существует свойство css background image. Также с его помощью можно сделать градиент фоном, то есть, плавный переход от одного цвета к другому.
Возможные значения свойства:
- url(‘URL’) – местонахождение картинки. Можно подгрузить изображение с сервера или другого сайта.
- none – отсутствие фонового изображения. Это значение выставлено по умолчанию. Также можно убрать фоновое изображение с помощью JS, присвоив свойству background-image это значение.
- initial – делает фоновую картинку изображением по умолчанию.
- 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 не работает? Причина, как правило, кроется в пути к изображению. Раньше была еще одна распространенная ошибка – неуказание вендорных префиксов, если хотелось сделать красивый градиентный фон. Но сейчас большинство браузеров уже поддерживает плавные переходы от одного цвета к другому. В любом случае, рекомендуется в таком случае выставлять вендорные префиксы:
- -o- (браузер Opera).
- -webkit– (браузеры, базирующиеся на этом движке, в частности: Safari и Chrome).
- -moz- (Firefox).
- -ms– (Старые версии Internet Explorer)
Чтобы повысить совместимость со старыми версиями браузеров, рекомендуется прописывать такую конструкцию, если необходимо сделать фоновую картинку, например, содержимого тега градиентной.
body
Но с каждым годом необходимость использования вендорных префиксов для создания радиальных градиентов становится все ниже.
Вторая ошибка – использование неправильного адреса. Нередко начинающие веб-разработчики не понимают, почему не выставляется фоновое изображение. А причина в том, что если css файл находится во вложенной папке, а картинка – вместе с HTML документом, то при определении изображения фона таким образом: background-image: url(image.jpg) браузер по умолчанию ищет изображение в той же папке, что и css-файл. Чтобы исправить эту проблему, необходимо указать путь на один уровень ниже: background-image: url(../image.jpg). Обычно этого достаточно, чтобы решить проблему с выставлением фонового изображения.