web development

Как добавить Цвет фона и Изображение в CSS

Как добавить Цвет фона и Изображение в CSS

Добавление цвета фона и изображения в CSS это легко и просто. В этом уроке мы покажем вам как добавить фонавый цвет и изображение в CSS.

По шагам, добавление Цвета фона и изображения в CSS.

1. Прежде всего, создайте HTML-файл. Вы можете использовать любой IDE, например блокнот или Notepad ++ или Adobe Dreamweaver, чтобы создать HTML-файл. В этом уроке мы, используя обычный блокнот, который доступен на любом ПК с Windows. Откройте блокнот и введите следующий код:

<html>

<head>

<title>CSS tutorial – 3</title>

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

</head>

<body>

<h1> Adding background color and image</h1>

</body>

</html>

И сохраните файл как .HTML-код (например: tut3.html).
Здесь, <link rel=”stylesheet” type=”text/css” href=”style.css” /> будет ссылка на таблицу стилей, которую мы собираемся создать.

Как добавить Цвет фона и Изображение в CSS

2. Далее, в той же директории (папке) где находится наш html файл, создайте папку с именем "css" и создайте в ней новый CSS-файл с именем "style.css".

Как добавить Цвет фона и Изображение в CSS

3. Далее открываем файл style.css и вводим в него следующий код:

body{

background-color: #c0c0c0;

}

И затем сохраните файл. Это позволит добавить Цвет фона. Обратите внимание, вместо #c0c0c0 вы можете использовать любой другой цвет. Посмотреть больше о цветовых кодах можно здесь – https://ru.wikipedia.org/wiki/%D0%A6%D0%B2%D0%B5%D1%82%D0%B0_HTML

Как добавить Цвет фона и Изображение в CSS

4. Еще раз, чтобы добавить фоновое изображение, сначала сохраните изображение в той же папке, где находится ваш HTML-файл и затем откройте файл CSS, который вы создали в шаге-2.

Как добавить Цвет фона и Изображение в CSS

5. Введите следующий код в тот же файл CSS, т. е. style.css

body{

background-image: url(‘../bg.png’);

background-repeat: repeat-x;

background-attachment: fixed

}

Добавить это ниже background-color: #c0c0c0;
На фон добавиться изображение. Убедитесь, что ваше фоновое изображение находится в той же папке или если вы переместите его в другую папку, дайте полный путь. Типа ../bg.png, подробнее о путях к файлам: https://ru.wikipedia.org/wiki/%D0%9F%D1%83%D1%82%D1%8C_%D0%BA_%D1%84%D0%B0%D0%B9%D0%BB%D1%83background-repeat

определяет, как фоновое изображение должно повторяться. По умолчанию, фоновое изображение, если размер маленький, то оно будет повторяться на всю страницу по (обе оси X и оси Y) но если вы хотите контролировать, по какой оси будет повторяться изображение или вообще что-бы изображение не повторялось ниже рассмотрены все способы background-repeat.

Есть четыре возможных значения для background-repeat.

background-repeat: repeat-x - это заставляет повторять фоновое изображение только по горизонтали.
background-repeat: repeat-y - этого заставляет повторять фоновое изображение только по вертикали.
background-repeat: repeat это делает повтор фонового изображения по горизонтали и вертикали. Это поведение по умолчанию.
background-repeat: no-repeat - это не повторять изображение. Будет отображено только одно фоновое изображение.

background-attachment используется, чтобы сделать фоновое изображение фиксированным или будет прокручиваться вместе со всей страницей Контента.

Существует два значения для background-attachment:
background-attachment: scroll - это заставит фоновое изображение прокручиваться вместе с содержимым страницы.
background-attachment: fixed - это будет блокировка фонового изображения.

Как добавить Цвет фона и Изображение в CSS
0
Comments