2.2 - Использование картинки для фона

Просто цвета бывает мало для изменения фона. Хочется чего-то больше чем сплошной цвет. Например залить фон какой-нибудь текстурой.

Для такого варианта нужно использовать изображения. А как? Очень просто - через background-images. С указанием пути к изображению, относительно файла где прописан стиль. Допустим стиль прописан в самом документе html и картинка для фона находится там же где и сам файл html. В общем в одной и той же папке.

Пример - использование фоновой картинки в CSS

<html>  <head>   <title>Установка изображения на фон CSS</title>   <style>    body     {     background-image: url('pic.png');    }   </style>  </head>  <body>   Тут типа текст или информация.  </body> </html>

Результат

Использование картинки для фона

Теперь весь фон залит картинкой в виде текстуры, а не просто цветом.

Повторение изображения для фона

Любое изображение установленной в качестве фона, по умолчанию, будет полностью "заливать" собой все пространство элемента путем повторения самого себя (В нашем примере фон устанавливался для всей страницы через элемент body). Но можно указать как именно использовать повторение изображения - по всему документу, по горизонтали, по вертикали или не повторять вовсе. Для этого есть свойство background-repeat.

Пример повторения изображения по вертикали.

<html>  <head>   <title>Установка изображения на фон CSS</title>   <style>    body    {     background-image: url('pic.png');     background-repeat:repeat-y;    }   </style>  </head>  <body>   Тут типа текст или информация.  </body> </html>

Результат

Повторение фоновой картинки по вертикали

Теперь наша картинка отображается только по вертикали. А для отображения по горизонтали - значение repeat-x

background-repeat:repeat-x;

Если нужно не повторять изображение вовсе то для таких случаев у свойства background-repeat значение должно быть равным no-repeat

Пример

<html>  <head>   <title>Установка изображения на фон CSS</title>   <style>    body    {     background-image: url('pic.png');     background-repeat:no-repeat;    }   </style>  </head>  <body>   Тут типа текст или информация.  </body> </html>

Результат

Отмена повтора фоновой картики

Список уроков