The CSS background properties are used to define the background effects for elements.


CSS background properties:

CSS Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Property Values

Value Description
Repeat The background image is repeated both vertically and horizontally.
Repeat-x The background image is repeated only horizontally
Repeat-y The background image is repeated only vertically
No-repeat The background-image is not repeated. The image will br show only once
RGBA
  • R=Red
  • G=Green
  • B=Blue
  • A=Alpha
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque)
HSL HSL stands for Hue, Saturation and Lightness.
HSLA HSL stands for Hue, Saturation ,Lightness and alpha.
Opacity The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("bg1.jpg");
}
h1 {
    background-color: green;
}
div {
    background-color: Red;
}
p {
    background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page)