В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.
Картинка в качестве фона страницы - HTML
Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:
<html>
<head>
<title>Фоновое изображение с помощью HTML</title>
</head>
<body bgcolor="#000" background="nubex.png">
<p>Здесь фоновое изображение устанавливается с помощью атрибута background тега body.</p>
</body>
</html>Как в примере выше, рекомендуется помимо картинки указывать и цвет фона (он будет отображаться на сайте во время загрузки страницы), который будет максимально сочетаться с фоновым изображением и создавать контраст с текстом на сайте. Например, если вы используете белый цвет текста на сайте, то стоит указать темный цвет фона и задать темное фоновое изображение. В таком случает текст будет легко читаться.
Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.
Картинка в качестве фона страницы - CSS
В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:
<html>
<head>
<title>Фоновое изображение с помощью CSS</title>
<style>
body {
background: #000 url(nubex.png); /* Фоновый цвет и фоновый рисунок*/
color: #fff; /*Цвет текста на странице*/
background-attachment: fixed; /* Фон страницы фиксируется */
background-repeat: repeat-x; /* Изображение повторяется по горизонтали */
}
</style>
</head>
<body>
<p>Здесь фоновый рисунок устанавливается с помощью свойства background CSS (фон картинка CSS).</p>
</body>
</html>Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо "сшиваться" по краям.
Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;
В конструкторе сайтов "Нубекс" для любого сайта можно использовать большое изображение в качестве фона и закрепить его.