CSS background is a shorthand property used to set multiple background-related properties for an element in one declaration. This can include background color, image, position, size, repeat, origin, clip, and attachment. Here’s a breakdown of the properties that can be included in the background shorthand:
background-color
Sets the background color of an element.
background-color: #ff0000; /* Red */
background-image
Sets the background image of an element.
background-image: url('image.jpg');
background-position
The background-position property in CSS is used to specify the initial position of a background image within an element. This property allows you to precisely control where the background image is placed relative to the element’s background area. You can set the position using keywords, length units, or percentages.
1. Predefined Keywords: You can use predefined keywords to position the background image.
top, right, bottom, left, center.
Syntax:
background-position: top left;
background-position: bottom right;
background-position: center center; /* or just center */
Example: Image positioned at the top left corner
background-image: url('image.jpg');
background-position: top left; /* Image positioned at the top left corner */
2. Length Units: You can use length units such as pixels (px), ems (em), rems (rem), etc.
background-position: 10px 20px; /* 10px from the left, 20px from the top */
Example:- Image positioned 30px from the left and 40px from the top
element {
background-image: url('image.jpg');
background-position: 30px 40px; /* Image positioned 30px from the left and 40px from the top */
}
3. Percentages: You can use percentages to position the background image relative to the element’s size. 0% represents the start (top or left), and 100% represents the end (bottom or right).
background-position: 50% 50%; /* Centered */
background-position: 0% 100%; /* Bottom left */
Example:- Image centered through percentages
element {
background-image: url('image.jpg');
background-position: 50% 50%; /* Image centered */
}
4. Combination of Length and Percentage
background-position: 50% 10px; /* Center horizontally, 10px from the top */
Example:- Image centered horizontally, 20px from the top
element {
background-image: url('image.jpg');
background-position: 50% 20px;
}
5. Using calc(): For more complex positioning, you can use the calc() function.
background-position: calc(100% - 10px) calc(100% - 20px);
Example:- Image positioned 10px from the right and 20px from the bottom
element {
background-image: url('image.jpg');
background-position: calc(100% - 10px) calc(100% - 20px);
}
background-size
The background-size property in CSS is used to specify the size of the background images of an element. This property allows you to control how a background image is scaled and displayed within an element. Here are the possible values for background-size
1. auto: The background image is displayed at its original size. This is the default value.
background-size: auto;
2. length: You can specify the width and height of the background image using length units (e.g., pixels, ems, etc.). If only one value is provided, the second value is set to auto.
background-size: 100px 200px; /* Width 100px, height 200px */
background-size: 100px; /* Width 100px, height auto */
3. percentage: The background image is scaled relative to the element’s dimensions. The first value sets the width, and the second value sets the height. If only one value is provided, the second value is set to auto.
background-size: 50% 50%; /* 50% of the element's width and height */
background-size: 50%; /* Width 50%, height auto */
background-repeat
The background-repeat property in CSS is used to control how background images are repeated (tiled) within an element. By default, background images are repeated both horizontally and vertically. The background-repeat property allows you to change this behavior. Here are the possible values for background-repeat:
1. repeat: The background image is repeated both horizontally and vertically. This is the default value.
background-repeat: repeat;
2. repeat-x: The background image is repeated only horizontally.
background-repeat: repeat-x;
3. repeat-y: The background image is repeated only vertically.
background-repeat: repeat-y;
4. no-repeat: The background image is not repeated.
background-repeat: no-repeat;