Как сделать картинку фоном в HTML.
Уверенно можно сказать, что практически ни один сайт не обходится без использования цветов и картинок в качестве фона. Без этого сделать красивый и стильный сайт просто невозможно. Давайте посмотрим, как сделать картинку фоном в HTML. Статья будет полезной для начинающих веб-мастеров.
Сделать картинку фоном можно с помощью 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> |
Другие посты
Категория: HTML
Если честно то у меня ни чего не получилось.я даже скопировал последний вариант ,указал другое название и формат картинки (убрал скобки) но все равно получается белый лист с надписью
*какое-то содержание*не могли бы вы подробно объяснить в чем моя ошибка .и кстати не подскажите как захостить сайт создаyный на html.
ученик 8а класса Пузаков Данил
Данил, к сожалению, не имея перед глазами Вашего файла html, сложно ответить, что именно не так. Возможно, некорректно указан путь к картинке. Чтобы разместить в интернете сайт на html, нужно заказать хостинг. Тут не расскажешь в двух словах, но посмотрите уроки по созданию сайта за один день (ссылка в меню). Возможно, это поможет…
я написал все по инструкции н и чего не получилось. Я думал что если написать сюда то он будет написан с тегами