Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Multiple Backgrounds

10 minutes

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Multiple Backgrounds

This chapter covers the addition of multiple background images to a single element, alongside explanations of the following properties:

background-size.
background-origin.
background-clip.

CSS Multiple Backgrounds

In CSS, you can incorporate multiple background images for an element using the background-image property. These images are listed separated by commas, and they are layered atop one another, with the first image closest to the viewer.

Consider the following example featuring two background images: The initial image showcases a flower, positioned at the bottom-right, while the subsequent image displays a paper background, aligned to the top-left corner.

Example

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

You can specify multiple background images using either the individual background properties, as demonstrated above, or the background shorthand property.

The subsequent example employs the background shorthand property, yielding 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

The CSS background-size property enables you to define the dimensions of background images, which can be specified using lengths, percentages, or keywords such as “contain” or “cover”.

In the subsequent example, the background image is resized to a considerably smaller size compared to the original image, utilizing pixels.

Below is the provided code snippet:

Example

#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}

The background-size property also accepts two additional values: contain and cover.

When “contain” is used, the background image is scaled to fit the content area as large as possible while ensuring both its width and height fit within the element. Consequently, depending on the image’s proportions and the container’s dimensions, there may be uncovered areas.

On the other hand, “cover” scales the background image so that it completely covers the content area, ensuring both its width and height exceed or equal those of the container. Consequently, portions of the background image may not be visible within the container.

The subsequent example demonstrates the application of “contain” and “cover“.

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 dealing with multiple backgrounds, the background-size property allows for the specification of multiple values (separated by commas) to define the size of each background individually.

In the following example, three background images are designated, each with a distinct 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

Here’s how to achieve a full-page background image on a website, meeting the specified requirements:

Ensure the image fills the entire page without leaving any white space.
Scale the image as necessary to fit.
Center the image on the page.
Prevent the appearance of scrollbars.

To implement this, utilize the <html> element, which inherently spans at least the height of the browser window. Apply a fixed and centered background to the <html> element, adjusting its size using the background-size property.

Example

html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}

Hero Image

Alternatively, you can employ various background properties on a <div> element to craft a hero image, which typically features a large image overlaid with text, and position it as desired on the webpage.

Example

.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}

CSS background-origin Property

The CSS background-origin property determines the starting position of the background image. It offers three distinct values:

border-box: The background image commences from the upper left corner of the border.
padding-box (default): The background image initiates from the upper left corner of the padding edge.
content-box: The background image begins from the upper left corner of the content.

The subsequent example demonstrates the application of 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 CSS background-clip property defines the area where the background is displayed.

It offers three options:

border-box (default): The background extends to the outer edge of the border.
padding-box: The background extends to the outer edge of the padding.
content-box: The background is confined within the content box.

The following example demonstrates the usage of the background-clip property.

Example

#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}