CSS Backgrounds Quiz

Quiz 3 8 questions

Prerequisites for the quiz

  1. CSS Backgrounds unit

Are you ready?

8 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Which property can be used to give a background color to an element?
Choices (B) and (C) are not CSS properties. Hence you're only left with (A). Refer to CSS Background Colors for more info.
How can you stop repeating a background image in both x and y directions?
background-repeat: no-repeat will remove the repetitive behavior from both the x and y directions. Refer to Styling Background Images for more info.
Given an element, add the image 'img.png' to its background.
The url() function takes the URL of an image to be added to an element's background, in the form of a string. Refer to CSS Background Images for more info.
How can we centralise an image in the background both horizontal and vertically?
Choice (B) shows an invalid property value. Choice (C) shows an invalid CSS property. Hence we are left with only choice (A). To know how background-position works refer to Styling Background Images for more info.
Which of the following results best go with the CSS code shown below?
div {
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
    padding: 30px;
}

Result 1:

Result 2:

Refer to Styling Background Images for more info.
What can you do to the code below to achieve the desired result shown?
div {
    background-repeat: no-repeat;
    border: 10px solid rgba(0, 0, 0, 0.1)
}
Refer to Styling Background Images for more info.
Which of the following is the equivalent of background-size: contain?
Refer to Styling Background Images for more info.
By default, background images in CSS don't repeat themselves. True or false?
By default background images in CSS do repeat themselves. Hence the statement made is false.