Background Size and Position

Put a 200 by 100 pixel picture into the travel card, and the browser draws it at exactly that size in the card's top-left corner. Two properties change that. background-size scales the image, and background-position moves it. Together they decide which part of a picture the reader sees, and that matters most when the same element is wide on a laptop and narrow on a phone.

The running example

The travel card from the previous lesson now gets a small landscape picture instead of the orange dot: a blue sky with two green mountains, 200 pixels wide and 100 pixels tall.