CSS background properties allow to control the visual appearance of the background of HTML elements. Set a solid color, an image, or a gradient as the background.
background-color
This property sets the background color of an element’s box. You can specify the color using color names (like red), hexadecimal codes (like #FF0000 or #F00), RGB values (like rgb(255, 0, 0)), HSL values (like hsl(0, 100%, 50%)), or the keyword transparent. If you don’t specify a background color, it defaults to transparent. This property colors the content and padding areas of an element, but not the margin.
/* Using a color name */
body {
background-color: lightblue; /* */
}
/* Using a hexadecimal code */
div {
background-color: #f0f0f0; /* */
}
/* Using an RGB value */
p {
background-color: rgb(200, 200, 200); /* */
}
/* Using an HSL value */
.element {
background-color: hsl(180, 50%, 75%); /* */
}
/* Using the transparent keyword */
.overlay {
background-color: transparent; /* */
}
background-image
This property sets one or more background images for an element. The value is a url() function that points to the image file. You can also specify none if you don’t want any background image. CSS3 supports multiple background images, separated by commas. The background image will be extracted behind any background color.
/* Setting a single background image */
body {
background-image: url('background.jpg'); /* */
}
/* Specifying no background image */
.no-bg {
background-image: none; /* */
}
/* Setting multiple background images */
.layered-bg {
background-image: url('image1.png'), url('image2.png'); /* */
background-repeat: no-repeat, repeat-x; /* */
background-position: top left, bottom right; /* */
}background-repeat
This property controls how a background image is covered if it doesn’t cover the entire element. Possible values include:
- repeat: The image is repeated both horizontally and vertically (default).
- repeat-x: The image is repeated only horizontally.
- repeat-y: The image is repeated only vertically.
- no-repeat: The image is not repeated; it is displayed only once.
/* Repeat the background image both ways */
.repeat {
background-image: url('pattern.png');
background-repeat: repeat; /* */
}
/* Repeat only horizontally */
.repeat-horizontal {
background-image: url('stripes.png');
background-repeat: repeat-x; /* */
}
/* Repeat only vertically */
.repeat-vertical {
background-image: url('sidebar-pattern.png');
background-repeat: repeat-y; /* */
}
/* Do not repeat the background image */
.no-repeat-bg {
background-image: url('logo.png');
background-repeat: no-repeat; /* */
}background-position:
This property sets the initial position of a background image within its element. You can use keywords like top, bottom, left, right, center, and length or percentage values to specify the horizontal and vertical positioning. If only one value is provided, it is applied to the horizontal position, and the vertical position defaults to center. You can designate distinct locations for each background image, separated by commas, if there are several.
/* Position at the top left */
.top-left {
background-image: url('image.png');
background-repeat: no-repeat;
background-position: top left; /* */
}
/* Position at the bottom right */
.bottom-right {
background-image: url('image.png');
background-repeat: no-repeat;
background-position: bottom right; /* */
}
/* Position at the center */
.center-bg {
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center; /* */
}
/* Position with percentage values */
.percent-pos {
background-image: url('image.png');
background-repeat: no-repeat;
background-position: 50% 25%; /* */
}
/* Positioning multiple backgrounds */
.multi-pos {
background-image: url('image1.png'), url('image2.png');
background-repeat: no-repeat, no-repeat;
background-position: top 10px left 20px, bottom 5% right 15%; /* */
}background-size:
This property specifies the size of the background image(s). Possible values include:
- auto: The background image is displayed at its original size (default).
- cover: The background image is scaled to cover the entire element, potentially cropping some parts of the image.
- contain: The background image is scaled to fit within the element, potentially leaving empty space.
- Length and percentage values: You can set explicit widths and heights in pixels, ems, or percentages. If only one value is given, it sets the width, and the height is set to auto. For multiple background images, you can specify different sizes for each, separated by commas.
/* Display at original size */
.original-size {
background-image: url('large-image.png');
background-repeat: no-repeat;
background-size: auto; /* */
}
/* Scale to cover the element */
.cover-bg {
background-image: url('wallpaper.jpg');
background-size: cover; /* */
}
/* Scale to fit within the element */
.contain-bg {
background-image: url('logo.png');
background-repeat: no-repeat;
background-size: contain; /* */
}
/* Set explicit width and height */
.custom-size {
background-image: url('icon.png');
background-repeat: no-repeat;
background-size: 50px 50px; /* */
}
/* Set width using percentage, height auto */
.percent-size {
background-image: url('banner.png');
background-size: 100% auto; /* */
}
/* Sizing multiple backgrounds */
.multi-size {
background-image: url('pattern1.png'), url('pattern2.png');
background-repeat: repeat, repeat;
background-size: auto 20px, 50% auto; /* */
}The background property is a shorthand property that allows you to set multiple background properties in a single declaration. The order of the values does not matter, and you can omit any properties you don’t want to set.
/* Shorthand example */
body {
background: #f0f0f0 url('background.png') no-repeat top left; /* */
}
/* Another shorthand example with background-size */
.element {
background: white url('image.jpg') no-repeat center/cover; /* */
}Using these background properties, you can create a wide variety of visual effects and enhance the aesthetics of your web pages.