Course Content

Introduction to CSS Part II

1. Text Styles

Font Styling 1/2 Font Styling 2/2 Text Alignment and Indent Text Special Effects Challenge

2. Сolors and Background

Сolor Formats 1/2 Color Formats 2/2 Background in CSS 1/2 Background in CSS 2/2 Customize Background Behavior Background Shorthand Color Gradients Challenge

3. Layouts

Floats Basic Display Properties Challenge Flexbox Basics Flexbox Properties Flex Shorthand Challenge

Customize Background Behavior

Now that we have gone over the background basics, some properties related to the background can be customized as required. Here is a detailed explanation of each property that can be set using the background shorthand property:

background-repeat

Specifies whether the background image should be repeated horizontally, vertically, or not at all. Valid values are repeat, repeat-x, repeat-y, and no-repeat. For example:

This prevents the background image from being repeated on the body element.

background-attachment

Specifies whether the background image should scroll with the rest of the page or stay fixed in place. Valid values are scroll and fixed. For example:

This sets the background image to stay fixed in place on the body element, even if the page is scrolled.

background-position

Specifies the position of the background image. This can be a keyword (such as center, top, or bottom), a length value, or a combination of the two. For example:

This centers the background image on the body element.

background-clip

Specifies whether the background image should be painted within the border box, padding box, or content box of an element. Valid values are border-box, padding-box, and content-box. For example:

This sets the background image to be painted within the content box of the body element.

background-origin

Specifies the position of the background image within the element's background positioning area. Valid values are border-box, padding-box, and content-box. For example:

This sets the background image to be positioned within the content box of the body element.

background-size

Specifies the size of the background image. This can be a keyword (such as cover or contain), a length value, or a combination of the two. For example:

This sets the background image to cover the entire body element.

1. Which of the following CSS color formats allows you to specify a color using hue, saturation, and lightness values?

2. Which of the following values can be used with the background-origin property to specify that the background image should be positioned relative to the border box of the element?

3. Which of the following is a valid CSS color format?

4. Fill in the blanks to specify a fixed, no-repeat background image that scales to cover the entire element

Which of the following CSS color formats allows you to specify a color using hue, saturation, and lightness values?

Select the correct answer

HSL

HSV

Hex

RGBA

Which of the following values can be used with the background-origin property to specify that the background image should be positioned relative to the border box of the element?

Select the correct answer

border-box

padding-box

content-box

Both border-box and content-box

Which of the following is a valid CSS color format?

Select the correct answer

#ffffff

rgb(255,255,255)

hsla(350, 40% 50% 1)

All of the above

Fill in the blanks to specify a fixed, no-repeat background image that scales to cover the entire element

body {
background-image: url(image.jpg);
background-attachment: ;
background-repeat: ;
background-size: ;
}

Click or drag`n`drop items and fill in the blanks

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 5