Background position in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS background-position property do?

It sets the starting position of a background image inside an element. You can move the image horizontally and vertically.

beginner

Name two units or keywords you can use with background-position.

You can use keywords like top, center, bottom, left, right, or length units like px, %, em.

beginner

How would you center a background image using background-position?

Use background-position: center; or background-position: 50% 50%; to place the image in the center horizontally and vertically.

beginner

What happens if you use background-position: right bottom;?

The background image will be placed at the bottom right corner of the element.

intermediate

Can background-position accept two values? What do they represent?

Yes, it accepts two values: the first is horizontal position, the second is vertical position. For example, background-position: 20px 30px; moves the image 20 pixels from the left and 30 pixels from the top.

Which CSS property controls where a background image starts inside an element?

A background-position

B background-size

C background-repeat

D background-color

background-position sets the starting point of the background image inside the element.

What does background-position: center; do?

A Places the image at the top left

B Places the image in the center horizontally and vertically

C Repeats the image in the center

D Removes the background image

It centers the background image both horizontally and vertically.

Which of these is a valid background-position value?

A center center

B middle middle

C top left bottom

D left-right

center center is valid. middle middle is not a CSS keyword.

If you want the background image to start 10 pixels from the left and 20 pixels from the top, what is correct?

A background-position: 10% 20%;

B background-position: 20px 10px;

C background-position: left 10px top 20px;

D background-position: 10px 20px;

The first value is horizontal (left), the second is vertical (top).

What does background-position: right bottom; do?

A Places the image at the top right

B Places the image at the bottom left

C Places the image at the bottom right

D Centers the image

It places the background image at the bottom right corner of the element.

Explain how to use the background-position property to move a background image to the top right corner.

Think about horizontal and vertical keywords.

Describe the difference between using percentage values and keyword values in background-position.

Consider how the image moves inside the element.