CSS Backgrounds
You will find out how to add more than one background picture to an element in this chapter.
Additionally, you will discover the following attributes:
- background-size
- background-origin
- background-clip
CSS Multiple Backgrounds
With the background-image property in CSS, you can add more than one background-image to an element.
Commas are used to divide the many backdrop photos, which are layered one on top of the other with the first image being the one nearest to the viewer.
Two background images are shown in the following example: a paper background (aligned to the top-left corner) and a floral background (aligned to the bottom and right):
Example
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
The background shorthand property or the distinct background properties (as above) can be used to specify multiple background pictures.
Using the background shorthand property, the following example yields the same outcome as the previous example:
Example
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
CSS Background Size
You may control the size of background pictures with the CSS background-size attribute.
One of the two keywords—contain or cover—or lengths or percentages might be used to indicate the size.
The sample that follows uses pixels to resize a backdrop image to a significantly lower size than the original image:
Example
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Contain and Cover are the two additional available variables for background-size.
The background picture is scaled to the greatest extent possible by the contain keyword, but it still needs to fit inside the content area in terms of both width and height. As a result, certain parts of the backdrop may not be covered by the background picture, depending on the background image’s proportions and the background positioning area.
The background picture is scaled by the cover keyword to entirely cover the content area (both width and height must match or exceed the content area). As a result, the background positioning area may not display the entire background image.
Example
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Define Sizes of Multiple Background Images
When working with numerous backgrounds, the background-size property additionally allows for the acceptance of different background sizes (using a comma-separated list).
Three backdrop images are supplied in the following example, and each image has a different background-size value:
Example
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
Full Size Background Image
We now want a website’s background image to fill the entire browser window at all times.
The following criteria must be met:
- The image should take up the whole page, with no white space.
- Resize the image as necessary.
- the page’s center image
- Avoid creating scrollbars
The example that follows demonstrates how to achieve it: Make use of the <html> element, which is always at least as tall as the browser window. Next, give it a background that is fixed and centered. Next, use the background-size property to change its size:
Example
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
Hero Image
Another option is to use a <div>’s background settings to create a hero image, which is a huge image with text, and then position it wherever you choose.
Example
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
CSS background-origin Property
The location of the background picture is specified by the CSS background-origin property.
Three distinct values are accepted for the property:
- border-box -Beginning in the upper left corner of the border, the background picture
- padding-box -By default, the padding edge’s upper left corner is where the background picture begins.
- content-box -Beginning at the upper left corner of the content, the background image
The following example illustrates the background-origin property:
Example
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS background-clip Property
The background painting area is specified via the CSS background-clip attribute.
Three distinct values are accepted for the property:
- border-box -By default, the background is painted up to the border’s outside edge.
- padding-box -The outside border of the cushioning is painted with the background.
- content-box -The content box has a painted background.
The following example illustrates the background-clip property:
Example
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSS Advanced Background Properties
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |
