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="html">
 
 
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');
}