Definition: Sets the background color of an element.
The color fills the entire element area including padding, but not margins. Default Value: transparent Values: Color names | hex codes | rgb() | rgba() | hsl() | transparent
✦ Using Hex Color
background-color: #ff6b6b;
.element {
background-color: #ff6b6b; /* Red color using hex */
}
✦ Using RGB Color
background-color: rgb(100, 200, 100);
.element {
background-color: rgb(100, 200, 100); /* Green using RGB */
}
.element {
background-color: skyblue; /* Named color */
}
📍 background-image
Definition: Sets one or more images as the background of an element.
The image is placed on top of the background-color. Default Value: none Values: url('path') | linear-gradient() | radial-gradient() | none
Definition: Specifies the size of the background image.
Controls how the image scales within the element. Default Value: auto Values: auto | cover | contain | width height | percentage
.element {
background-image: url('image.jpg');
background-repeat: round; /* Scales images to fit evenly */
}
📍 background-position
Definition: Sets the starting position of the background image.
Determines where the image appears within the element. Default Value: 0% 0% (top-left) Values: Keywords (center, top, left, etc.) | Percentages | Pixel values
✦ center
background-position: center;
.element {
background-image: url('image.jpg');
background-position: center; /* Center both horizontally and vertically */
background-repeat: no-repeat;
}
Definition: Specifies the positioning area of the background image.
Determines from which box model the background is positioned (border, padding, or content). Default Value: padding-box Values: border-box | padding-box | content-box
.element {
background-image: url('image.jpg');
background-origin: border-box; /* Includes border area */
padding: 20px;
border: 3px solid;
}
✦ content-box
background-origin: content-box;
.element {
background-image: url('image.jpg');
background-origin: content-box; /* Only inside content area */
padding: 20px;
border: 3px solid;
}
📍 background-clip
Definition: Specifies how far the background extends within an element.
Controls clipping area of the background (border, padding, or content). Default Value: border-box Values: border-box | padding-box | content-box | text
.element {
background: linear-gradient(90deg, #00d2fc, #928dab);
background-clip: content-box; /* Only inside content area */
padding: 15px;
border: 5px solid;
}
✦ text (Gradient Text Effect)
Gradient Text
.element {
background: linear-gradient(90deg, #ff6b6b, #ffd89b);
-webkit-background-clip: text; /* Vendor prefix needed */
background-clip: text;
color: transparent; /* Hide text color to show background */
}
📍 background (Shorthand)
Definition: Combines all background properties into one declaration.
More concise and efficient way to set multiple background properties at once. Syntax: background: [color] [image] [repeat] [attachment] [position/size] Note: Order matters - not all properties need to be specified