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

Если вы только начали изучать HTML вёрстку, то данная статья поможет вам сделать фон у вашей странички в интернете, как например это сделала поисковая система BING.



Существует два варианта изменения фона HTML документа, либо с помощью вставки специального атрибута в тег <body> либо воспользоваться css стилем. Давайте рассмотрим первый способ с помощью вставки специального тега в тело документа.

Каждый тег, будь это <img> <a> или <body> может использовать стили с помощью атрибута style.

Полный код

<body style="background-image: URL(/fon.jpg)">

Если использовать стили, которые подгружаются либо между тегами <head></head>, можно сделать следующим способом.

<style>
body{
background-image: URL(/fon.jpg);
}
</style>

Чтобы изменить цвет фона пропишите следующий код:


<style>
body{
background-color: #000;
}
</style>

Где #000 цвет фона в формет HEX.


Если стили хранятся в отдельном файле, прописывать тег <style> нет необходимости, достаточно прописать следующий код во внешний файл:

body{
background-color: #000;
}

Для того чтобы подключить файл стилей, необходимо добавить следующую строку между тегами <head></head>:

<link rel="stylesheet" href="/css.css" type="text/css">

Где css.css путь до файла со стилями. И уже внутри этого файла можно прописывать стили, например вот так:

body{
background-image: URL(/fon.jpg); /* Устанавливаем фон картинок */
font-size:12px; /* Размер текста в документе */
color: green; /* Зелёный цвет текста */
font-family: Tahoma; /* Шрифт текста */
}

Хочу так же напомнить, что фон можно повторять по всему сайту, для этого служит следующий код для css файла:

background-repeat: no-repeat;
/ * без повторения */
background-repeat: repeat-x; / * фон повторяется по горизонтали*/
background-repeat: repeat-y; / * фон повторяется по вертикали*/

и полный css будет выглядеть вот таким образом

body{
background-image: URL(/fon.jpg);

background-repeat: repeat-x;
}

Тебе нравится?

Похожие вопросы