Ксс фон: Как сделать фоновый рисунок в css

Write an Article

• Write an Interview Experience

CSS Properties

CSS Selectors

CSS Functions

CSS Advanced

CSS Plugins

CSS Questions

Сохранить статью

• Уровень сложности: Средний
• Последнее обновление: 26 февраля 2023 г.

Улучшить статью

Сохранить статью

Свойства фона CSS используются для определения фоновых эффектов для элементов. Есть много свойств для оформления фона.
Свойства фона CSS: 

• Свойство CSS Background-color. Свойство background-color в CSS используется для указания цвета фона элемента.
• Свойство CSS Background-image: Свойство background-image используется для установки одного или нескольких фоновых изображений для элемента.
• Свойство CSS Background-repeat: Свойство background-repeat в CSS используется для повторения фонового изображения как по горизонтали, так и по вертикали.
• Свойство CSS Background-attachment: Свойство background-attachment в CSS используется для указания типа прикрепления фонового изображения к его контейнеру.
• Свойство CSS Background-position: В CSS свойство body-position в основном используется для установки изображения в определенной позиции.
• Свойство CSS Background-origin: background-origin — это свойство, определенное в CSS, которое помогает настроить фоновое изображение веб-страницы.
• Свойство CSS Background-clip: Свойство background-clip в CSS используется для определения того, как расширить фон (цвет или изображение) внутри элемента.

Цвет фона Свойство : Это свойство определяет цвет фона элемента. Название цвета также может быть указано как: «зеленый», шестнадцатеричное значение как «#5570f0», значение RGB как «rgb (25, 255, 2)».
Синтаксис:

 тело {
   background-color:название цвета
} 

Пример:

HTML

Вывод:

Фоновое изображение. По умолчанию изображение повторяется, поэтому оно покрывает весь элемент.
Синтаксис: 

 тело {
   фоновое изображение: ссылка;
} 

Пример:  

Вывод:  
 

Повторение фона Свойство : По умолчанию свойство фонового изображения повторяет изображение как по горизонтали, так и по вертикали.
Синтаксис: Чтобы повторить изображение по горизонтали

 body {
   фоновое изображение: ссылка;
   фоновый повтор: повтор: x;
} 

Пример:

Вывод:

Свойство Background-attachment : Это свойство используется для исправления фонового изображения земли. Изображение не будет прокручиваться вместе со страницей.
Синтаксис:  

 тело {
   background-attachment: исправлено;
} 

Пример:  

Вывод:  

Свойство Background-position : Это свойство используется для установки изображения в определенное положение.

 тело {
   фоновый повтор: без повтора;
   фоновая позиция: слева вверху;
}