Difference between revisions of "CSS: Backgrounds"

Line 5: Line 5:
 
The <syntaxhighlight>background-color</syntaxhighlight> property modifies the color of the background. For example, the code
 
The <syntaxhighlight>background-color</syntaxhighlight> property modifies the color of the background. For example, the code
  
<syntaxhighlight lang="html">
+
<syntaxhighlight lang="css">
 
div{
 
div{
 
     background-color: red;
 
     background-color: red;
Line 18: Line 18:
 
You can use the <syntaxhighlight>background-image</syntaxhighlight> property to use an image instead of a color/gradient:
 
You can use the <syntaxhighlight>background-image</syntaxhighlight> property to use an image instead of a color/gradient:
  
<syntaxhighlight>
+
<syntaxhighlight lang="css">
 
div{
 
div{
 
     background-image: url('/image.png');
 
     background-image: url('/image.png');
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>

Revision as of 12:07, 23 December 2022

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:

Background Image

You can use the

background-image

property to use an image instead of a color/gradient:

div{
    background-image: url('/image.png');
}