При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- gradient
- Работа с размером фона в CSS
- Абсолютное изменение размера
- Относительное изменение размера
- Масштабирование до максимального размера
- Заполнение фоном
- Масштабирование сразу нескольких фонов
Создание полупрозрачного фона в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега <body>. Рассмотрим все свойства, которые связаны с заданием фона.

Задаёт цвет фона. Его можно применять как к отдельным элементам <h1>, <p>, так и ко всему веб-сайту с помощью тега <body>.

Например:

/* белый фон заголовка и чёрный цвет шрифта
h1 {
	color: #000;
background-color: #fff
}

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Например:

body {
background-image: url(“example_image.png”);
}

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

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

Например, повторение по горизонтали выглядит так:

Это свойство определяет фиксирование фонового изображения при скроллинге:

background-attachment: scroll — фон прокручивается вместе со страницей;
background-attachment: fixed — фон остаётся неподвижным.

Данное свойство определяет расположение фоновой картинки относительно экрана. Значения свойства представляют собой набор вертикальных и горизонтальных координат, отсчет которых начинается с верхнего левого угла.

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

Например:

background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .gradient {
    background: #2639fa; /* Для устаревших браузеров */
    background: linear-gradient(to top, #2639fa, #c9d1ff);
    padding: 40px;
    border: 1px solid #000;
   }
  </style>
 </head>
 <body>
  <p class="gradient">текст</p> 
 </body>
</html>

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Например:

background: #fff url(“example_image.png”) no-repeat fixed right bottom

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

background-size: 150px 300px

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Если применять проценты, размер будет основываться не на изображении, а на элементе.

Например:

background-size: 50% auto;

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

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

background-size: contain;

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

background: url(“example_image.png”) 70% 90% no-repeat, 
         url(“example_image.png”) 30% 50% no-repeat,
         url(“example_image.png”) 15% 25% no-repeat #fff,
         url(“example_image.png”) 70% 90% no-repeat,
background-size: 250px 200px, auto, 100 px;

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.

Пример создания полупрозрачного блока:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>opacity</title>
  <style>
   body {
    background: url("http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
    background-size: 10% auto;
   }
   div {
	 opacity: 0.7;
 	 background: #717ceb; /* Цвет фона */
 	 padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
   <div>Так выглядит полупрозрачный блок.</div>
 </body>
</html>

Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>rgba</title>
  <style>
   body { 
  background: url("http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
  background-size: 20% auto;
}
   div {
    background: rgba(60, 150, 250, 0.7); /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>Прозрачный фон блока и непрозрачный текст.</div>
 </body>
</html>

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

Источник

В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах.
Мы рассмотрим также продвинутые методы позиционирования и управления фоновым
изображением. Будут разъяснены следующие CSS-свойства:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

Цвет переднего плана : свойство ‘color’

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа
тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>.
В нижеприведённом коде цвет элемента <h1> устанавливается
красным.

Показать пример

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000),
либо вы можете использовать названия цветов («red») или rgb-значения (rgb(255,0,0)).

Свойство ‘background-color’

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое
HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство
background-color нужно применить к элементу <body>.

Вы можете также применять это свойство к другим элементам, в том числе — к
заголовкам и тексту. В следующем примере различные цвета фона применяются к
элементам <body>
и <h1>.


	body {
	background-color: #FFCC66;
	}

	h1 {
	color: #990000;
	background-color: #FC9804;
	}

Показать пример

Заметьте, что устанавливает два свойства для <h1>,
разделяя их точкой с запятой.

Фоновые изображения [background-image]

CSS-свойство background-image используется для вставки фонового
изображения.

Ниже мы используем в качестве фонового изображение бабочки. Вы можете
загрузить это изображение и использовать его на вашем компьютере (щёлкните
правой клавишей мыши на изображении и выберите «сохранить изображение как/save image as»),
либо вы можете использовать другое изображение.

Для вставки рисунка бабочки в качестве фонового изображения web-страницы
просто примените свойство background-image в тэге <body>
и укажите местоположение рисунка.


	body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	}

	h1 {
	color: #990000;
	background-color: #FC9804;
	}

Показать пример

NB: Обратите внимание, что мы специфицируем место, где находится файл как url(«butterfly.gif»).
Это означает, что он находится в той же папке, что и таблица стилей. Вы,
разумеется, можете ссылаться и на файлы изображений в других папках, используя,
например, url(«../images/butterfly.gif»), или
даже на файлы в Internet, указывая полный адрес файла : url(«http://www.html.net/butterfly.gif»).

Повторение/мультипликация фонового изображения [background-repeat]

Вы заметили в предыдущем примере, что изображение бабочки повторяется по
умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat
управляет этим.

В таблице указаны четыре значения background-repeat.

Значение	Описание	Пример
`Background-repeat: repeat-x`	Рисунок повторяется по горизонтали	Показать пример
`background-repeat: repeat-y`	Рисунок повторяется по вертикали	Показать пример
`background-repeat: repeat`	Рисунок повторяется по горизонтали и вертикали	Показать пример
`background-repeat: no-repeat`	Рисунок не повторяется	Показать пример

Например, для отмены повторения/мультипликации фонового рисунка мы должны
записать такой код:


	body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	}

	h1 {
	color: #990000;
	background-color: #FC9804;
	}

Показать пример

Блокировка фонового изображения [background-attachment]

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

В таблице указаны два значения background-attachment. Щёлкните
на примере, чтобы почувствовать разницу между scroll и fixed.

Значение	Описание	Пример
`Background-attachment: scroll`	Изображение прокручивается вместе со страницей — разблокировано	Показать пример
`Background-attachment: fixed`	Изображение блокировано	Показать пример

Например, следующий код фиксирует изображение.


	body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	}

	h1 {
	color: #990000;
	background-color: #FC9804;
	}

Показать пример

Расположение фонового рисунка [background-position]

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана.
Свойство background-position позволяет изменять это значение по
умолчанию, и фоновый рисунок может располагаться в любом месте экрана.

Есть много способов установить значение background-position. Тем
не менее, все они представляют собой набор координат.
Например, значение ‘100px 200px’ располагает фоновый рисунок на 100px слева и на 200px
сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных
единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left
и right. Модель ниже иллюстрирует сказанное:

В таблице дано несколько примеров.

Значение	Описание	Пример
`background-position: 2cm 2cm`	Рисунок расположен на 2 cm слева и на 2 cm сверху	Показать пример
`background-position: 50% 25%`	Рисунок расположен по центру и на четверть экрана сверху	Показать пример
`background-position: top right`	Рисунок расположен в правом верхнем углу страницы	Показать пример

В примере кода фоновое изображение располагается в правом нижнем углу экрана:


	body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right bottom;
	}

	h1 {
	color: #990000;
	background-color: #FC9804;
	}

Показать пример

Сокращённая запись [background]

Свойство background входит в состав всех свойств, перечисленных
в этом уроке.

С помощью background вы можете сжимать несколько свойств и
записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:


	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right bottom;

Используя background, того же результата можно достичь одной
строкой кода:


	background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию.
Например, если background-attachment и background-position
нет в данном примере:


	background: #FFCC66 url("butterfly.gif") no-repeat;

то этим двум неспецифицированным свойствам будут присвоены значения по
умолчанию — scroll
и top left.

Резюме

В этом уроке вы уже познакомились с техникой, отсутствующей в HTML. Ещё
интереснее будет в
следующем уроке, где мы рассмотрим широкие возможности CSS при описании
шрифтов.

<< Урок 2: Как работает CSS?

Урок 4: Шрифт >>

Источник

1
Определите цвет фона, который вы хотите использовать. В HTML цвета задаются кодами, которые определяют различные оттенки. Воспользуйтесь бесплатным онлайн-инструментом W3Schools HTML Color Picker, чтобы найти коды нужных цветов:
- Перейдите на страницу https://www.w3schools.com/colors/colors_picker.asp в веб-браузере компьютера.
- Выберите базовый цвет, который хотите использовать, в разделе «Pick a Color» (Выбрать цвет).
- Выберите оттенок в правой части страницы.
- Запишите код, который отобразится справа от выбранного оттенка.
2
Откройте HTML-файл в текстовом редакторе. Помните, что в HTML5 атрибут <bgcolor> больше не поддерживается. Поэтому цвет фона и другие параметры стиля страницы задаются с помощью CSS.^[1]
- HTML-документ можно открыть в Notepad++ или Блокноте (Windows), а также в TextEdit или BBEdit (Mac).
3
Добавьте заголовок «html» в документ. Все параметры стиля страницы, включая цвет фона, должны находиться между тегами <style></style>:
```
<!DOCTYPE html>
<html>
<head>
<style>
</style> 
</head>
</html>
```
4

Создайте пустую строку между тегами «style». На этой строке, которая должна находиться под тегом <style> и над тегом </style>, вы введете необходимую информацию.

6
Добавьте элемент «body». Введите следующий код между тегами <style></style>:
- Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
- Пропустите этот шаг, если хотите создать градиентный фон.
Реклама

1

Найдите заголовок «html». Он должен быть в верхней части документа.
2
Добавьте свойство «background-color» в элемент «body». Введите background-color: в фигурных скобках внутри элемента «body». Должен получиться следующий код:
```
body {
    background-color: 
}
```
- Обратите внимание, что в этом коде необходимо использовать слово «color», а не «colour».
3
Добавьте нужный цвет фона в свойство «background-color». Справа от «background-color:» введите числовой код выбранного цвета, а затем введите точку с запятой (;). Например, чтобы фон страницы сделать розовым, напишите следующий код:
```
body {
    background-color: #d24dff;
}
```
4
Просмотрите информацию внутри тегов «style». На этом этапе заголовок вашего HTML-документа должен выглядеть следующим образом:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d24dff
}
</style>
</head>
</html>
```
5
Используйте «background-color», чтобы задать цвет фона других элементов (заголовков, абзацев и тому подобных). Например, чтобы задать цвет фона основного заголовка (<h1>) или абзаца (<p>), напишите следующий код:^[2]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: #00b33c;
}
p {
    background-color: #FFFFFF);
}
</style>
</head>
<body>
<h1>Заголовок на зеленом фоне</h1>
<p>Абзац на белом фоне</p>
</body>
</html>
```
Реклама

1

Найдите заголовок «html». Он должен быть в верхней части документа.
2
Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода. ^[3]
```
background: linear-gradient(направление/угол, цвет1, цвет2, цвет3 и так далее);
```
3
Создайте вертикальный градиент. Если не задать направление, градиент будет идти сверху вниз. Чтобы создать такой градиент, введите следующий код между тегами <style></style>:
```
html {
    min-height: 100%; 
}
body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); 
    background: -o-linear-gradient(#93B874, #C9DCB9); 
    background: -moz-linear-gradient(#93B874, #C9DCB9); 
    background: linear-gradient(#93B874, #C9DCB9); 
    background-color: #93B874; 
}
```
- В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.
4
Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами <style></style>:^[4]
```
html {
    min-height: 100%;
}

body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
    background: -o-linear-gradient(right, #93B874, #C9DCB9); 
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
    background: linear-gradient(to right, #93B874, #C9DCB9); 
    background-color: #93B874; 
}
```
- Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.
5
Используйте другие свойства для настройки градиента. С ним можно сделать больше, чем кажется.
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
```
background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
```
- Добавьте прозрачность к цвету. В этом случае он будет постепенно затухать. Чтобы добиться эффекта затухания, используйте один и тот же цвет. Чтобы задать цвет, понадобится функция rgba(). Последнее значение определит прозрачность: 0 — непрозрачный цвет и 1 — прозрачный цвет.
```
background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
```
6
Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:
```
<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
    background: -o-linear-gradient(right, #93B874, #C9DCB9);
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
    background: linear-gradient(to right, #93B874, #C9DCB9); 
    background-color: #93B874; 
}
</style>
</head>
<body>
</body>
</html>
```
Реклама

1

Найдите заголовок «html». Он должен быть в верхней части документа.
2
Добавьте свойство «animation» в элемент «body». Введите следующий код после «body {» и до закрывающей фигурной скобки:^[5]
```
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
```
- Верхняя строка текста предназначена для браузеров на основе Chromium, а нижняя строка текста — для других браузеров.
3
Добавьте цвета в свойство «animation». Воспользуйтесь правилом «@keyframes», чтобы задать цвета фона, которые будут циклически меняться, а также время, в течение которого каждый цвет будет отображаться на странице. Не забудьте ввести разный код для различных браузеров. Введите следующий код под закрывающей фигурной скобкой элемента «body»: ^[6]
```
@-webkit-keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
```
- Обратите внимание, что два правила (@-webkit-keyframes и @keyframes) имеют одинаковые цвета фона и проценты. Это сделано для того, чтобы меняющийся фон правильно работал в любом браузере.
- Проценты (0%, 25% и так далее) обозначают долю от времени (60 с). Когда страница загрузится, ее фоном будет цвет #33FFF3. Когда пройдет 15 с (25% от 60 с), фон сменится на цвет # 7821F и так далее.
- Измените время и цвета, чтобы они соответствовали желаемому результату.
4
Просмотрите код. Код для создания меняющегося фона должен выглядеть следующим образом:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
@-webkit-keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
</style>
</head>
<body>
</body>
</html>
```
Реклама

Советы

Если вы хотите использовать основные цвета в HTML-коде, можно вводить имена цветов (без символа #), а не их числовые коды. Например, чтобы создать оранжевый фон, введите background-color: orange;.
В качестве фона веб-страницы можно установить изображение.

Предупреждения

Проверьте изменения, внесенные в код веб-сайта, прежде чем публиковать их.

Источники

Об этой статье

Эту страницу просматривали 185 520 раз.

Была ли эта статья полезной?

Источник

CSS — Урок 5. Свойства — color (цвет) и background (фон)

Цвет — color

В течение предыдущих уроков мы все время использовали свойство цвета — color. Это свойство задает цвет текста
внутри элемента.

Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас
имеется html-страница со следующим кодом:

css color (цвет)

Заголовок

Здесь текст параграфа.

Здесь просто текст.

Зададим стиль для элемента body:

body{
color:green;
}

Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать
свой стиль. Например, сделаем цвет заголовка красным:

body{
color:green;
}
h1{
color:red;
}

Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы,
был зеленым, потому что унаследовал свойство color от своего «предка» — элемента body.

Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента «предка». Если оно
не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это
свойство задано.

Дерево элементов — структура всех элементов html-страницы, отражающая их вложенность друг в друга.
Схематично дерево элементов для нашего примера выглядит так:

В нашем примере для элементов h1 и p предком является элемент body, для
которого предком является элемент html. Это и есть принцип наследования.

Значениями свойства color могут быть именные цвета (red, blue…), шестнадцатеричные коды цветов (#FF0000) и десятичные
коды цвета в модели RGB (rgb(255, 0, 0)). Подробнее о цвете читайте на странице цвета для web.

Итак, задать цвет текста для элемента можно тремя способами:

body{
color:green;
}
h1{
color:#FF0000;
}
h2{
color:rgb(255,0,0);
}

Фон — background

На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку,
и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:

css background (фон)

Здесь содержимое документа

Рассмотрим группу свойств background:

background-color — задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если
в качестве значения указать значение inherit.

Пример:

body{
background-color:#243CED;
color:yellow;
}

Сейчас наша страница в браузере выглядит так:
background-image — задает фоновое изображение. Значением свойства является URL графического файла.
Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к
файлу указывается относительно таблицы стилей.

Пример:

body{
background-image:url(picture.gif);
background-color:#243CED;
color:yellow;
}

Сейчас наша страница в браузере выглядит так:

В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif (об относительной адресации читайте
на странице абсолютная и относительная адресация).

Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется
делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое
изображение будет лежать поверх фонового цвета.
background-repeat — задает возможность повторения фонового изображения. В качестве фонового изображения
может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все
пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять.
Возможны 4 варианта:
- repeat — повторять изображение по горизонтали и вертикали.
- repeat-x — повторять изображение только по горизонтали.
- repeat-y — повторять изображение только по вертикали.
- no-repeat — не повторять изображение.
По умолчанию используется значение repeat, как мы и убедились в предыдущем примере. Давайте посмотрим как
ведут себя остальные значения:

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
color:yellow;
}

В браузере выглядит так:

body{
background-image:url(picture.gif);
background-repeat:repeat-x;
background-color:#243CED;
color:yellow;
}

В браузере выглядит так:

body{
background-image:url(picture.gif);
background-repeat:repeat-y;
background-color:#243CED;
color:yellow;
}

В браузере выглядит так:
background-attachment — указывает, должно ли фоновое изображение прокручиваться вместе с текстом
элемента или оно должно оставаться неподвижным. Может принимать два значения:
- scroll — фон прокручивается вместе с текстом. Это значение используется по умолчанию.
- fixed — фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно
  остается неподвижным.
Пример:

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#243CED;
color:yellow;
}

Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это
действительно обоснованно.
background-position — задает расположение элемента относительно окна браузера. Значения можно
задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:10% 30%;
color:yellow;
}

Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали.
Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:

А в Opera так:

Этой проблемы можно избежать, задавая размер в пикселах:

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:50px 50px;
color:yellow;
}

Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:center top;
color:yellow;
}

Изображение будет выровнено по горизонтали — по центру, а по вертикали — по верхнему краю страницы:

Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю),
center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю),
center (по центру) и bottom (по нижнему краю).

Сокращенная запись свойства background

В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в
произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:

body{
background:url(picture.gif) no-repeat #33CCFF center top;
color:yellow;
}

Вот мы и рассмотрели свойства цвета и фона. Помните, что их можно применять ко всем элементам. Для тренировки задайте фон для
заголовка или ссылки. А наш урок подошел к концу. В следующий раз будем изучать возможности управления шрифтами в CSS.

Предыдущий урок
Вернуться в раздел
Следующий урок

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

Код кнопки:

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.

Источник

Download Article

An easy-to-follow guide for coding with CSS and HTML to add the background colors of a page

Download Article

Setting a Solid Background Color

Creating a Gradient Background

Creating a Changing Background

Tips

Warnings

Did you want to change the background color of that page using HTML? Unfortunately, with HTML 5, this is no longer possible in just HTML coding. Instead, you’ll need to use both HTML and CSS coding, which works even better. This wikiHow teaches you how to change the background color of a web page by editing its HTML and CSS.

Things You Should Know

Although the attribute for HTML to manage background color is gone, you can still use HTML with CSS to change your background color easily.
You’ll need a numeric code for the color you want if you want a specific color. If you don’t need a specific color, you can use words like «orange» or «light blue.»
When editing a web page with HTML and CSS, you can create a solid background, gradient, or changing background.

1

Find your document’s «html» header. It should be near the top of the document.
2
Add the «background-color» property to the «body» element. Type background-color: between the body brackets. You should now have the following «body» element:
- In this context, only one spelling of «color» will work; you can’t use «colour» here.
Advertisement
3
Add your desired background color to the «background-color» property. Type your selected color’s numeric code followed by a semicolon next to the «background-color:» element to do so. For example, to set your page’s background to pink, you would have the following:
4
Review your «style» information. At this point, your HTML document’s header should resemble the following:
5
Use «background-color» to apply background colors to other elements. Just as you set it in the body element, you can use «background-color» to define the backgrounds of other elements such as headers, paragraphs, and so on. For example, to apply a background color to a main header (<h1>) or a paragraph (<p>), you would have something resembling the following code:^[1]

1

Find your document’s «html» header. It should be near the top of the document.
2
Understand the basic syntax of this process. When making a gradient, there are two pieces of information you’ll need: the starting point/angle, and the colors that the gradient will transition between. You can select multiple colors to have the gradient move between all of them, and you can set a direction or angle for the gradient.^[2]
```
background: linear-gradient(direction/angle, color1, color2, color3, etc);
```
}}
3
Make a vertical gradient. If you don’t specify the direction, the gradient will go from top to bottom. To create your gradient, add the following code between the <style></style> tags:
- Different browsers have different implementations of the gradient function, so you’ll have to include several versions of the code.
4
Make a directional gradient. If you’d rather create a gradient that isn’t strictly vertical, you can add direction to the gradient in order to change the way the color shift appears. Do so by typing the following in between the <style></style> tags:^[3]
- You can play around with the «left» and «right» tags to experiment with different directions for your gradient.
5
Use other properties to adjust the gradient. There’s a lot more that you can do with gradients.
- For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here’s a sample gradient that uses this principle:
```
background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
```
6
Add transparency to your colors. This will make the color fade. Use the same color to fade from the color to nothing. You’ll need to use the rgba() function to define the color. The ending value determines the transparency: 0 for solid and 1 for transparent.

Review your completed code. The code to create a color gradient as your website’s background will look something like this:

<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
    background: -o-linear-gradient(right, #93B874, #C9DCB9);
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
    background: linear-gradient(to right, #93B874, #C9DCB9); 
    background-color: #93B874; 
}
</style>
</head>
<body>
</body>
</html>

1

Find your document’s «html» header. It should be near the top of the document.
2
Add the animation property to the «body» element. Type the following into the space below the «body {» bracket and above the closing bracket:^[4]
- The top line of text is for Chromium-based browsers while the bottom line of text is for other browsers.
3
Add your colors to the animation. Now you’ll use the @keyframes rule to set the background colors through which you’ll cycle, as well as the length of time each color will appear on the page. Again, you’ll need separate entries for the different sets of browsers. Enter the following lines of code below the closed «body» bracket:^[5]
- Note that the two rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You’ll want these to stay uniform so the experience is the same on all browsers.
- The percentages (0%, 25%, etc) are of the total animation length (60s). When the page loads, the background will be the color set at 0% (#33FFF3). Once the animation has played for 25% of of 60 seconds, the background will turn to #7821F, and so on.
- You can modify the times and colors to fit your desired outcome.

Review your code. Your entire code for the changing background color should resemble the following:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
@-webkit-keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
</style>
</head>
<body>
</body>
</html>

Add New Question

Question

How do I set a background color for a specific width?

Use the background-size property inside of the «body» element. For example, «background-size: 300px 150px» makes the background 300 pixels wide and 150 pixels high.
Question

It does not work. What can I do?

UsernameHere11

Community Answer

To make it black, try:

body {
background-color: #190707}
Question

What is the correct HTML for adding a background color?

My text goes here!

Replace the html code above with your text and selected your preferred color.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Use online HTML pickers if you want a very specific color for your background. If, for example, you want the background to be the same color as your walls, you can match HTML colors with paint splotches at certain sites.
If you want to use basic colors within your HTML code, you can type the colors’ names without the pound sign (#) instead of using an HTML color code. For example: to create an orange background, you would type in background-color: orange; here.

Show More Tips

Thanks for submitting a tip for review!

Make sure you test any changes to your website before publishing them online.

References

About This Article

Thanks to all authors for creating a page that has been read 1,491,185 times.

Is this article up to date?

Источник

Download Article

An easy-to-follow guide for coding with CSS and HTML to add the background colors of a page

Download Article

Setting a Solid Background Color

Creating a Gradient Background

Creating a Changing Background

Tips

Warnings

Things You Should Know

Although the attribute for HTML to manage background color is gone, you can still use HTML with CSS to change your background color easily.
You’ll need a numeric code for the color you want if you want a specific color. If you don’t need a specific color, you can use words like «orange» or «light blue.»
When editing a web page with HTML and CSS, you can create a solid background, gradient, or changing background.

1

Find your document’s «html» header. It should be near the top of the document.
2
Add the «background-color» property to the «body» element. Type background-color: between the body brackets. You should now have the following «body» element:
- In this context, only one spelling of «color» will work; you can’t use «colour» here.
Advertisement
3
Add your desired background color to the «background-color» property. Type your selected color’s numeric code followed by a semicolon next to the «background-color:» element to do so. For example, to set your page’s background to pink, you would have the following:
4
Review your «style» information. At this point, your HTML document’s header should resemble the following:
5
Use «background-color» to apply background colors to other elements. Just as you set it in the body element, you can use «background-color» to define the backgrounds of other elements such as headers, paragraphs, and so on. For example, to apply a background color to a main header (<h1>) or a paragraph (<p>), you would have something resembling the following code:^[1]

1

Find your document’s «html» header. It should be near the top of the document.
2
Understand the basic syntax of this process. When making a gradient, there are two pieces of information you’ll need: the starting point/angle, and the colors that the gradient will transition between. You can select multiple colors to have the gradient move between all of them, and you can set a direction or angle for the gradient.^[2]
```
background: linear-gradient(direction/angle, color1, color2, color3, etc);
```
}}
3
Make a vertical gradient. If you don’t specify the direction, the gradient will go from top to bottom. To create your gradient, add the following code between the <style></style> tags:
- Different browsers have different implementations of the gradient function, so you’ll have to include several versions of the code.
4
Make a directional gradient. If you’d rather create a gradient that isn’t strictly vertical, you can add direction to the gradient in order to change the way the color shift appears. Do so by typing the following in between the <style></style> tags:^[3]
- You can play around with the «left» and «right» tags to experiment with different directions for your gradient.
5
Use other properties to adjust the gradient. There’s a lot more that you can do with gradients.
- For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here’s a sample gradient that uses this principle:
```
background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
```
6
Add transparency to your colors. This will make the color fade. Use the same color to fade from the color to nothing. You’ll need to use the rgba() function to define the color. The ending value determines the transparency: 0 for solid and 1 for transparent.

Review your completed code. The code to create a color gradient as your website’s background will look something like this:

<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
    background: -o-linear-gradient(right, #93B874, #C9DCB9);
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
    background: linear-gradient(to right, #93B874, #C9DCB9); 
    background-color: #93B874; 
}
</style>
</head>
<body>
</body>
</html>

1

Find your document’s «html» header. It should be near the top of the document.
2
Add the animation property to the «body» element. Type the following into the space below the «body {» bracket and above the closing bracket:^[4]
- The top line of text is for Chromium-based browsers while the bottom line of text is for other browsers.
3
Add your colors to the animation. Now you’ll use the @keyframes rule to set the background colors through which you’ll cycle, as well as the length of time each color will appear on the page. Again, you’ll need separate entries for the different sets of browsers. Enter the following lines of code below the closed «body» bracket:^[5]
- Note that the two rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You’ll want these to stay uniform so the experience is the same on all browsers.
- The percentages (0%, 25%, etc) are of the total animation length (60s). When the page loads, the background will be the color set at 0% (#33FFF3). Once the animation has played for 25% of of 60 seconds, the background will turn to #7821F, and so on.
- You can modify the times and colors to fit your desired outcome.

Review your code. Your entire code for the changing background color should resemble the following:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
@-webkit-keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
</style>
</head>
<body>
</body>
</html>

Add New Question

Question

How do I set a background color for a specific width?

Use the background-size property inside of the «body» element. For example, «background-size: 300px 150px» makes the background 300 pixels wide and 150 pixels high.
Question

It does not work. What can I do?

UsernameHere11

Community Answer

To make it black, try:

body {
background-color: #190707}
Question

What is the correct HTML for adding a background color?

My text goes here!

Replace the html code above with your text and selected your preferred color.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Use online HTML pickers if you want a very specific color for your background. If, for example, you want the background to be the same color as your walls, you can match HTML colors with paint splotches at certain sites.
If you want to use basic colors within your HTML code, you can type the colors’ names without the pound sign (#) instead of using an HTML color code. For example: to create an orange background, you would type in background-color: orange; here.

Show More Tips

Thanks for submitting a tip for review!

Make sure you test any changes to your website before publishing them online.

References

About This Article

Thanks to all authors for creating a page that has been read 1,491,185 times.

Is this article up to date?

Источник

Как изменить цвет фона для всех элементов h1 на странице

Цвет переднего плана : свойство ‘color’

Свойство ‘background-color’

Фоновые изображения [background-image]

Повторение/мультипликация фонового изображения [background-repeat]

Блокировка фонового изображения [background-attachment]

Расположение фонового рисунка [background-position]

Сокращённая запись [background]

Резюме

Советы

Предупреждения

Источники

Об этой статье

Была ли эта статья полезной?

CSS — Урок 5. Свойства — color (цвет) и background (фон)

Заголовок

Things You Should Know

References

About This Article

Is this article up to date?

Things You Should Know

References

About This Article

Is this article up to date?

Читайте также: