В идеале фоновое изображение, или фон сайта задается через стили CSS. Но поскольку не все умеют с ними работать, сначала разберемся, как задать фон сайта или отдельной страницы в HTML.
Как изменить цвет фона
В HTML фоновое изображение на сайте задается с помощью атрибута background тега body. Для примера возьмем цвет pink, розовый. Кстати, цвет можно выразить как в буквенной форме (RGB) — pink, red, white, black, так и в буквенно-числовой (HEX) — #000000, #FFFF00 (в этом случае обязательно впереди ставится решетка #).
| 1 2 3 4 5 6 | <html> <body background-color:pink> </body> </html> |
Либо:
| 1 2 3 4 5 6 | <html> <body background-color:#FFC0CB> </body> </html> |
Получаем такой результат:
Как изменить цвет фона в CSS
Также сделать это достаточно просто с помощью такого стиля CSS:
| 1 2 3 4 5 6 7 8 | <style type="text/css"> body { background-color:pink; } </style> |
Как установить фоновое изображение на сайт
В CSS фоновый цвет и фоновое изображение можно задать одним свойством background. И если вам требуется установить фоновое изображение в виде картинки на всю страницу сайта, то это можно сделать с помощью следующего стиля CSS:
| 1 2 3 4 5 6 7 8 | <style> body { background-image: url(images/bg.jpg); } </style> |
В скобках после url указывается полный путь к фоновому изображению — вида https://mysite/images/bg.jpg.
Стоит добавить, что фоновое изображение должно находиться в той же папке, что и ваш html-файл, чтобы он правильно смог найти к нему путь. С помощью таких нехитрых действий можно создать для каждой страницы разные фоновые изображения на html.
Пример установленного фона:
Чтобы растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%; то есть код уже будет таким:
| 1 2 3 4 5 6 7 8 | <style> body { background-image: url(images/bg.jpg); background-size: 100%; } </style> |
Зачем устанавливать и цвет, и изображение фона
Небольшой совет — помимо картинки стоит указывать и цвет фона — он будет отображаться на сайте во время загрузки страницы. Оптимально, чтобы цвет сочетался с фоновым изображением и создавал контраст с текстом на сайте. Например, если на сайте используется традиционный черный текст, то стоит подобрать светлый цвет фона и задать светлое же фоновое изображение. В таком случает текст будет легко читаться.
Код в этом случае будет таким:
| 1 2 3 4 5 6 7 8 | <style> body { background-image: url(images/bg.jpg); background-color:pink; } </style> |
Статья была полезной?