Код для установки фона в HTML

2022-07-21 0 ∞

Данная статья посвящена установке background image HTML. Фоновое изображение устанавливается при помощи CSS для любого HTML-элемента. Кроме этого можно определить расположение изображения, будет ли оно повторяться, каким образом оно будет повторяться и т.д.

Пример фонового изображения

В данном примере мы задаем фоновое изображение для элемента <div>.

Посмотреть пример

Без повтора

В этом примере мы устанавливаем фоновое изображение, применяя свойство background-repeat со значением no-repeat. Теперь фон не будет повторяться, когда изображение меньше элемента. Также можно применить значения repeat-x и repeat-y, чтобы изображение повторялось только по горизонтали или по вертикали.

Посмотреть пример

Страница целиком

Приведенный ниже пример позволяет HTML background image растянуть для всей страницы (в теге body). Мы помещаем фоновый рисунок в центр страницы и не допускаем его повторения.

Посмотреть пример

Будет лучше, если вы используете свойство background, чтобы задать все стили фона сразу. Для этого мы перепишем код так, как показано в следующем примере.

Посмотреть пример

Где разместить код?

Чтобы установить HTML body background image для каждой страницы сайта, разместите код во внешней таблице стилей.

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