CSS background-image

05.02.2019 at 08:45

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

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

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

    div {background-image: url(flower.png);} /* фон контейнера div */
    table {background-image: radial-gradient(farthest-corner at 50% 50%, red, blue);} /* радиальный градиент таблицы */
    p {background-image: linear-gradient(to top left, red, white);} /* линейный градиент абзаца */

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

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

body {
    background-image:url(image.jpg);
    background-size: cover;
}

Управление фоновым изображением через 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 {
    background-image: linear-gradient(to top left, red, white);
    background-image: -o-linear-gradient(to top left, red, white);
    background-image: -webkit-linear-gradient(to top left, red, white);
    background-image: -moz-linear-gradient(to top left, red, white);
    background-image: -ms-linear-gradient(to top left, red, white);
}

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

Tags: