Buzz
The background properties in CSS are utilized to define various background effects for elements.
Background properties in CSS
Key background attributes in CSS include:
- The background-color property.
- The background-image property.
- The background-repeat property.
- The background-attachment property.
- The background-position property.
Background properties in CSS
1. Background Color property in CSS
The background-color property in CSS is utilized to specify the background color for an element.
The output result appears as follows:
In CSS, colors are commonly specified by:
- Valid color names, such as 'Red'.
Hex values such as '#ff0000'.
RGB values like 'rgb(255,0,0)'.
For more information on color values in CSS, readers can refer to the color article on Mytour to explore a list of valid color values.
Example 2:
The output result appears as follows:
2. Background Image Property in CSS
The background-image property in CSS specifies the image used as the background of an element.
By default, the background image is repeated to cover the entire element.
Example 1:
The output result appears as follows:
Example 2:
The following example illustrates the incorrect usage of combining text and background image:
By default, the background-image property repeats the background image both horizontally and vertically.
Example 1:
In the following example, the background is repeated both horizontally and vertically, resulting in a peculiar appearance:
The output result is as follows:
Example 2:
In the following example, the background is only repeated horizontally (background-repeat: repeat-x;):
The output result is as follows:
Note: To repeat the background vertically, we set: background-repeat: repeat-y;
4. Setting Background Position in CSS
The background-repeat property displays the background image only once, without repetition.
Example 1:
The output result is as follows:
In the example above, the background is displayed in the same position as the text, causing visual clutter. However, we can adjust the background position to avoid affecting the text.
To specify the background position, we use the background-position property.
Example 2:
The output result is as follows:
5. Setting Fixed Background Position
To set a fixed background position that does not scroll, we use the background-attachment property.
Example:
The output result is as follows:
6. Simplifying Background Properties
To streamline the code, we can consolidate all background properties into a single shorthand property. This method is also known as shorthand property.
The shorthand property for background is background.
Example:
The output result is as follows:
When using shorthand properties, the order of property values will be:
background-color
background-image
background-repeat
background-attachment
background-position
7. Background Properties in CSS
In the table below, Mytour lists all the Background properties in CSS:
Property Description
background Sets all background properties in one declaration.
background-attachment Sets whether a background image is fixed or scrolls with the page.
background-clip Specifies the positioning area for the background image.
background-color Sets the background color of an element.
background-image Sets the background image for an element.
background-origin Specifies the positioning area for background images.
background-position Sets the starting position of a background image.
background-repeat Sets how a background image will be repeated.
background-size Specifies the size of the background image.
Thus, in this CSS lesson, Mytour has introduced you to the background properties in CSS. In the next lesson, Mytour will further introduce you to the font properties in CSS.
