CSS Backgrounds, Borders, and Images Modules

Question 1

Have a background image completely fill the container, even if you have to stretch the image

Answer 1

background-size: cover;

Question 2

Have a background image completely display in the container, even if it leaves some empty space

Answer 2

background-size: contain;

Question 3

Place a background image so it bleeds to the edge of the box, regardless of padding or border.

Answer 3

background-origin: border-box; // also: padding-box; content-box;

Question 4

What’s the syntax for using multiple background images?

Answer 4

background-image: url(top.png), url(middle.png), url(bottom.jpg);

Question 5

how is background-origin different than background-clip?

Answer 5

Both control how image displays relative to border, padding, or content box. Clip controls painting and origin controls placement.

Question 6

Create a shadow that doesn’t extend to ends of the shape – make it inset by 5 or 10px on right and left.

Answer 6

box-shadow: 0 20px 10px -15px; // negative spread creates this effect

Question 7

Create a linear gradient with three colors and set change points

Answer 7

background-image: linear-gradient(white 20%, yellow 40%, blue 90%;

Question 8

What prefixed only (as yet) property lets you control image size of background images?

Answer 8

image-set: url (small.jpg 1x, medium.jpg 2x);

Question 9

What are two ways to have a blue/yellow gradient extend from bottom to top?

Answer 9

linear-gradient( to top, blue, yellow) or (0deg, blue, yellow); or just 0, blue, yellow without deg.

Question 10

Repeat a gradient of vertical lines across container

Answer 10

background-image: repeating-linear-gradient(90deg, black, black 10px, white 10px, white 20px);

Question 11

Add a variable for a main color to root element, use the variable.

Answer 11

:root { –color: #efefef; };

color: var(–color);

Question 12

What is the default background-clip and what does it mean in terms of backgrounds and borders?

Answer 12

default is border-box, meaning background color extends under the border, which is an issue with transparent white over white or dashed white over white.

Question 13

How could you create a fat outline around text using text-shadow?

Answer 13

Use commas to create multiple shadows on left, right, top and bottom; add additional shadows to extend the outline (each with an increasing offset).

Question 14

How can you create a single dot using linear gradient, and how might you turn it into a line?

Answer 14

background-image:linear-gradient(red, red);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 4px 100%;