Backgrounds and Borders

Question 1

Background property and value that will not repeat the image.

Answer 1

background-repeat: no-repeat;

Question 2

Position the background image to be vertically and horizontally centered.

Answer 2

background-position: center;

Question 3

background-attachment: _____; does not allow a background image to scroll with its containing element, but it will scroll when the element’s content scrolls.

Answer 3

local

Question 4

background-attachment: _____; does not allow a background image to scroll with the content on the page

Answer 4

fixed

Question 5

T/F: Rounded corners are formed from the radius of a quarter circle, and elliptical corners are formed from the radius of a quarter ellipse.

Answer 5

True

Question 6

When two border values are defined in the shorthand property:

Answer 6

the first value is applied to top-left and bottom-right corners, and the second value is applied to the top-right and bottom-left corners

Question 7

If 2 values are used for 1 corner, the first value is the _ _ _ _ radius and the second is the _ _ _ _ radius.

Answer 7

horizontal, vertical

Question 8

Using the border-radius shorthand, give each corner of a div a horizontal radius of 100px and a vertical radius of 50px.

Answer 8

border-radius: 100px / 50px;

Question 9

Create a drop shadow for a div. Make it appear 10px to the right and 10px down, with a spread radius of 5px, a color of #222, and a blur radius of 15px.

Answer 9

box-shadow: 10px 10px 15px 5px #222;

box-shadow: x-axis y-axis blur spread color

Question 10

What value places a box-shadow inside the element?

Answer 10

inset

Question 11

We have an image file, ‘smiley.png’, located in the ‘img’ folder. Set it so that it doesn’t repeat, and position it in the top-right corner of the div. Then, add ‘img/pencil.png’ above the smiley image layer. Set it so that it doesn’t repeat, and position it in the bottom-left corner.

Answer 11

background: url(“img/pencil.png”) no-repeat left bottom, url(“img/smiley.png”) no-repeat right top

Question 12

What is the function of the “background-clip” property?

Answer 12

it determines whether the background position is relative to the border, padding, or content area of the element

Question 13

In a comma-separated list of backgrounds, where is the best place for an opaque image or color?

Answer 13

last

Question 14

T/F: “background-size: contain;” will scale an image so that it fits entirely inside the background area, while keeping its original aspect ratio.

Answer 14

True

Question 15

What best describes “background-size: cover;”?

Answer 15

it adjusts a background image to fill the entire background positioning area and scales it so that both its width and height can display proportionately