Как сделать картинку фоном в 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

Комментарии (3)

 

  1. danil:
    01.05.2014 в 6:08 пп

    Если честно то у меня ни чего не получилось.я даже скопировал последний вариант ,указал другое название и формат картинки (убрал скобки) но все равно получается белый лист с надписью
    *какое-то содержание*не могли бы вы подробно объяснить в чем моя ошибка .и кстати не подскажите как захостить сайт создаyный на html.
    ученик 8а класса Пузаков Данил

  2. admin:
    09.05.2014 в 5:40 пп

    Данил, к сожалению, не имея перед глазами Вашего файла html, сложно ответить, что именно не так. Возможно, некорректно указан путь к картинке. Чтобы разместить в интернете сайт на html, нужно заказать хостинг. Тут не расскажешь в двух словах, но посмотрите уроки по созданию сайта за один день (ссылка в меню). Возможно, это поможет…

  3. damir:
    13.05.2014 в 4:53 пп

    я написал все по инструкции н и чего не получилось. Я думал что если написать сюда то он будет написан с тегами

Оставить комментарий