CSS свойство background - httpdoc.ru

Фон CSS

Свойство CSS background обеспечивает стилизацию фона элементов HTML. Некоторые свойства:

  1. background-color - цвет фона
  2. background-imge - картинка фона
  3. backround-repeat - повторение фона
  4. background-attachment - прокрутка фона вместе с содержимым
  5. background-position - расположение фона

Цвет фона

background-color Свойство задает цвет фона элемента.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Background </title> 
  <meta charset="UTF-8">
<style>
body {
    background-color: pink;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a pink background color!</p>
</body>
</html>

Выход

CSS Background

Привет, мир!

Эта страница имеет розовый цвет фона!


Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Background Color </title> 
  <meta charset="UTF-8">
<style>
h1 {
    background-color: seagreen;
    padding:10px;
}
p {
    background-color: lightblue;
    padding:10px;
}
</style>
</head>
<body>
<h1> CSS background-color example!</h1>
<p> This paragraph has its own background lightblue color.</p>
</body>
</html>

Выход

CSS Background Color

Пример цвета фона CSS!

Этот абзац имеет свой фон светло-голубого цвета.


Фоновая картинка

background-image Свойство устанавливает изображение в качестве фона элемента.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Background Image </title> 
  <meta charset="UTF-8">
<style>
body {
    background-image: url("image.png");
}
</style>
</head>
<body>

<h1> CSS background-image example! </h1>
<p> This is an example of Background Image. </p>
</body>
</html>