WikiGalaxy
CSS Background Properties
Background Color:
The background-color property sets the background color of an element. It can be specified using color names, hex codes, RGB, RGBA, HSL, or HSLA values.
body {
background-color: #f0f0f0;
}
Console Output:
The page background is light gray.
Background Image
Using Images as Background:
The background-image property sets one or more background images for an element. Use the URL function to specify the path to the image.
.hero {
background-image: url('hero.jpg');
}
Console Output:
The hero section displays a background image.
Background Repeat
Controlling Image Repetition:
The background-repeat property defines how background images are repeated. Options include repeat, no-repeat, repeat-x, and repeat-y.
.pattern {
background-image: url('pattern.png');
background-repeat: repeat-x;
}
Console Output:
The pattern repeats horizontally across the element.
Background Size
Adjusting Image Size:
The background-size property specifies the size of the background images. Values can be auto, cover, contain, or specific dimensions.
.banner {
background-image: url('banner.jpg');
background-size: cover;
}
Console Output:
The banner image covers the entire element.
Background Position
Positioning Background Images:
The background-position property sets the starting position of a background image. It can be specified in length units, percentages, or keywords like top, right, bottom, left, and center.
.header {
background-image: url('header.jpg');
background-position: center;
}
Console Output:
The header image is centered within the element.
Background Attachment
Fixing Backgrounds:
The background-attachment property determines whether a background image scrolls with the rest of the page or is fixed in place. Options are scroll, fixed, and local.
.fixed-bg {
background-image: url('fixed.jpg');
background-attachment: fixed;
}
Console Output:
The background image remains fixed while scrolling.
Background Clip
Clipping Backgrounds:
The background-clip property specifies the painting area of the background. Options include border-box, padding-box, and content-box.
.clipped {
background-image: url('clipped.jpg');
background-clip: padding-box;
}
Console Output:
The background is clipped to the padding box.
Background Origin
Origin of Backgrounds:
The background-origin property specifies the positioning area of the background images. It can be set to border-box, padding-box, or content-box.
.origin {
background-image: url('origin.jpg');
background-origin: content-box;
}
Console Output:
The background starts from the content box.
Multiple Backgrounds
Layering Backgrounds:
CSS allows multiple background images to be layered on top of each other. Each image is separated by a comma in the background-image property.
.multi-bg {
background-image: url('layer1.png'), url('layer2.png');
}
Console Output:
Multiple background images are layered.
