Как сделать картинку фоном в HTML.

Опубликовано: 24.08.2018

Уверенно можно сказать, что практически ни один сайт не обходится без использования цветов и картинок в качестве фона. Без этого сделать красивый и стильный сайт просто невозможно. Давайте посмотрим, как сделать картинку фоном в HTML. Статья будет полезной для начинающих веб-мастеров.

CSS Как растянуть фон на весь экран

Сделать картинку фоном можно с помощью css-стилей. Рассмотрим пример.

Допустим у нас в коде страницы есть блочный элемент div , для которого нам нужно задать фоновое изображение. Сама картинка имеет размеры 100х100, и точно такие же размеры имеет наш div .

как установить фон на сайт

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html> <head> <title>Картинка в качестве фона</title> </head> <body> <div style="width:100px;height:100px;"> </div> </body> </html>

Чтобы сделать нашу картинку фоном для блока, мы будем использовать такое css-свойство:

1	background: url(images/picture.png);

Вот как это будет выглядеть в html:

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html> <head> <title>Картинка в качестве фона</title> </head> <body> <div style="width:100px;height:100px; background: url(images/picture.png);"> </div> </body> </html>

В скобках url() мы задаем путь к нашей картинке.

Если же картинка имеет меньшие размеры, чем элемент div, то мы можем задать «повторение» фонового изображения по горизонтали или вертикали.

1	background: url(images/picture.png) repeat-y;

или

1	background: url(images/picture.png) repeat-x;

x – повторение по горизонтали

y – повторение по вертикали

Кстати, более правильным будет вынести наши свойства стилей за пределы html-кода, например, хотя бы в область <head></head>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <head> <title>Картинка в качестве фона</title> <style> .my_block{ width:100px; height:100px; background: url(images/picture.png); } </style> </head> <body> <div class="my_block"> </div> </body> </html>

Если вам необходимо сделать картинку фоном для всей области сайта, то свойство background нужно назначать для body.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <head> <title>Картинка в качестве фона</title> <style> body{ background: url(images/picture.png) repeat-y; } </style> </head> <body> <div class="my_block"> Какое-то содержание </div> </body> </html>

Другие посты