Использование CSS для установки фонового изображения

• April 26, 2024

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

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

тело {
background-image: url ("image.gif");
}

Это все, что вам нужно сделать, чтобы разместить фоновое изображение для вашей веб-страницы. Конечно, вы, вероятно, захотите настроить внешний вид изображения. Допустим, вы хотите, чтобы ваше изображение начиналось в верхней части страницы, но располагалось по центру по горизонтали, а не по левому краю (выравнивание по умолчанию). В этом случае вы захотите добавить свойство 'background-position' в ваше правило CSS:

тело {
background-image: url ("image.gif");
background-position: центр сверху;
}

При определении свойства background-position первое значение задает горизонтальное выравнивание (слева, по центру или справа), а второе задает вертикальное выравнивание изображения (сверху, по центру или снизу).

Затем вы решаете, что хотите остановить горизонтальное мозаичное изображение (повторяющееся), хотя хотите, чтобы оно располагалось вертикально. Пришло время вывести свойство 'background-repeat':

тело {
background-image: url ("image.gif");
background-position: центр сверху;
background-repeat: repeat-y;
}

Установка значения 'repeat-y' заставляет браузер располагать фоновое изображение вдоль оси y, то есть по вертикали, но не по оси x (по горизонтали), что именно то, что мы хотели. Если вы хотите расположить его по горизонтали, но не по вертикали, используйте вместо этого значение 'repeat-x'; если вы вообще не хотите, чтобы изображение располагалось мозаикой, присвойте ему значение «no-repeat». Значением по умолчанию является мозаика изображения как по горизонтали, так и по вертикали, поэтому, если это лучший выбор для вашего изображения, вам вообще не нужно устанавливать свойство 'background-repeat'.

Наконец, вы можете взглянуть на свойство background-attachment. По умолчанию ваше изображение будет прокручиваться по мере прокрутки страницы, поэтому, если вы не повторяете изображение по вертикали и у вас длинная страница, ваше изображение не будет расширяться до нижней части страницы. Вы можете изменить это, установив свойство 'background-attachment' в значение 'fixed', что заставит фоновое изображение оставаться на том же месте на мониторе независимо от того, как страница прокручивается. Теперь ваши правила фонового изображения будут выглядеть так:

тело {
background-image: url ("image.gif");
background-position: центр сверху;
background-repeat: repeat-y;
background-attachment: исправлено;
}


Если вы хотите, чтобы ваши правила CSS были как можно меньше, вы можете объединить все значения фона в одну строку, используя свойство background, например:

фон {
url ("image.gif") repeat-y с фиксированной центральной вершиной;
}

При использовании свойства 'background' вы должны перечислить значения в определенном порядке:
[background-color (если используется)] [background-image] [background-repeat] [background-attachment] [background-position]. Вы можете опустить любое значение, которое вам не нужно, вам просто нужно перечислить все значения, которые вы используете, в правильном порядке, иначе правило не будет работать.

Видео инструкция: Почему не работает background-image и Не отображается фон страницы, Видео курс по CSS, Урок 25 (April 2024).