CSS3 introduces some new background properties that offer greater control over the backgrounds of elements, including background-size, background-origin, and background-clip. These properties improve the flexibility of CSS backgrounds beyond what was possible in earlier versions.
CSS3 background properties provide powerful tools for controlling the appearance of elements without relying on images. They improve design flexibility and can contribute to faster loading times by reducing the need for image assets.
background-size
The background-size property allows you to scale the size of background images. This is a new feature in CSS3.
Syntax: E { background-size: value; }
The value can be one or two lengths or percentages, or one of the following keywords:
length
It explicitly sets the width and height of the background image using units such as px, em, or rem. If only one value is provided, it sets the width, and the height is set to auto to maintain the aspect ratio. If two values are provided, the first sets the width and the second sets the height.
Example
.example {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50px 50px; /* Sets both width and height to 50px */
}
.example-single {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 75px; /* Sets width to 75px, height to auto */
}
.example-two-values {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 75px 130px; /* Sets width to 75px, height to 130px */
}percentage:
The background image’s width and height are set as a percentage of the background positioning area. Similar to length values, one percentage sets the width with autoheight, and two percentages set both the width and height.
Example
.example-percentage {
width: 200px;
height: 150px;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50% 50%; /* Background image will be 100px by 75px */
}cover
The system scales the background image to its maximum size, ensuring it completely covers the background positioning area. The system may clip some parts of the image to align with the element’s aspect ratio.
Example
.example-cover {
width: 300px;
height: 200px;
background-image: url('landscape.jpg');
background-repeat: no-repeat;
background-size: cover;
}contain
The function scales the background image to fit within the background positioning area while maintaining its aspect ratio. This function ensures the entire image is visible, but it might result in empty areas around the image if the aspect ratio of the image doesn’t match the element.
Example
.example-contain {
width: 300px;
height: 200px;
background-image: url('portrait.jpg');
background-repeat: no-repeat;
background-size: contain;
}background-origin
The background-origin property specifies where the background image is positioned from. In CSS2, we calculated the background positions based on the padding’s outer limits. Background Origin allows you to change this. Keep in mind that setting background-attachment to fixed has no effect on this property.
Syntax: E { background-origin: keyword; }
padding-box
The background image is positioned relative to the padding box (the area enclosed by the padding edges). This is the default value.
Example
.example-padding-box {
width: 300px;
border: 20px solid black;
padding: 50px;
background-image: url('bunny.png');
background-repeat: no-repeat;
background-position: 0 100%; /* Bottom left */
background-origin: padding-box; /* Bottom left of the padding area */
}border-box:
The background image is positioned relative to the border box (the area enclosed by the border edges).
Example
.example-border-box {
width: 300px;
border: 20px solid black;
padding: 50px;
background-image: url('bunny.png');
background-repeat: no-repeat;
background-position: 0 100%; /* Bottom left */
background-origin: border-box; /* Bottom left of the border area */
}content-box:
The background image is positioned relative to the content box (the area enclosed by the content edges).
Example
.example-content-box {
width: 300px;
border: 20px solid black;
padding: 50px;
background-image: url('bunny.png');
background-repeat: no-repeat;
background-position: 0 100%; /* Bottom left */
background-origin: content-box; /* Bottom left of the content area */
}background-clip
The background-clip property specifies the painting area of the background. It determines whether the background (color or image) extends into the border, padding, or content area.
Syntax: E { background-clip: keyword; }
The keyword can be one of the following values:
border-box
The background extends to the outside edge of the element’s border. This is the default value.
Example
.example-border-clip {
width: 200px;
border: 20px solid rgba(0, 0, 0, 0.5); /* Semi-transparent border */
padding: 20px;
background-color: yellow;
background-clip: border-box; /* Background extends behind the border */
}padding-box:
The background is clipped to the outside edge of the element’s padding and does not extend into the border.
Example
.example-padding-clip {
width: 200px;
border: 20px solid rgba(0, 0, 0, 0.5);
padding: 20px;
background-color: yellow;
background-clip: padding-box; /* Background stops at the padding edge */
}content-box:
The background is clipped to the edge of the content box.
Example
.example-content-clip {
width: 200px;
border: 20px solid rgba(0, 0, 0, 0.5);
padding: 20px;
background-color: yellow;
background-clip: content-box; /* Background stops at the content edge */
}text:
This is a non-standard value (with the -webkit- prefix) that clips the background to the foreground text of the element, making the background visible only behind the letters.
Example
.example-text-clip {
font-size: 4em;
color: white;
background-image: url('pattern.png');
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}CSS3 Topics