Difference between revisions of "CSS: Backgrounds"
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | This page shows how to create and use backgrounds in CSS. | ||
+ | {{template:CSS}} | ||
+ | |||
==Background== | ==Background== | ||
− | You can use the <syntaxhighlight>background</syntaxhighlight> CSS property to modify the background of an element. The background consists of several parts. | + | You can use the <syntaxhighlight inline>background</syntaxhighlight> CSS property to modify the background of an element. The background consists of several parts. |
==Background Color== | ==Background Color== | ||
− | The <syntaxhighlight>background-color</syntaxhighlight> property modifies the color of the background. For example, the code | + | The <syntaxhighlight inline>background-color</syntaxhighlight> property modifies the color of the background. For example, the code |
− | + | <syntaxhighlight lang="css"> | |
− | <syntaxhighlight lang=" | ||
div{ | div{ | ||
background-color: red; | background-color: red; | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | |||
will create the following: | will create the following: | ||
− | |||
<div style="background-color: red; width: 50px; height: 50px;"></div> | <div style="background-color: red; width: 50px; height: 50px;"></div> | ||
+ | You can also use gradients instead of colors. | ||
==Background Image== | ==Background Image== | ||
− | You can use the <syntaxhighlight>background-image</syntaxhighlight> property to use an image instead of a color/gradient: | + | You can use the <syntaxhighlight inline>background-image</syntaxhighlight> property to use an image instead of a color/gradient: |
− | + | <syntaxhighlight lang="css"> | |
− | <syntaxhighlight> | ||
div{ | div{ | ||
background-image: url('/image.png'); | background-image: url('/image.png'); | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> |
Latest revision as of 12:20, 23 December 2022
This page shows how to create and use backgrounds in CSS.
CSS |
Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements |
Background
You can use the background
CSS property to modify the background of an element. The background consists of several parts.
Background Color
The background-color
property modifies the color of the background. For example, the code
div{
background-color: red;
}
will create the following:
You can also use gradients instead of colors.
Background Image
You can use the background-image
property to use an image instead of a color/gradient:
div{
background-image: url('/image.png');
}