Sizing & Positioning Backgrounds
Most background images do not match the element's size. Learn cover vs contain and how to control which part of the image stays visible.
Step 1 of 4
cover vs contain
Background images come in their own dimensions, but the element you put them behind probably has different ones. Two values solve almost every case:
background-size: cover— scale the image up until it fully covers the element. Some of the image will be cropped. Use this for hero photos.background-size: contain— scale the image so the whole picture fits. Empty space appears around it if proportions differ. Use this for logos and icons.
You can also give exact sizes: background-size: 200px 100px or background-size: 100% auto.
Think of it this way: Hanging a poster bigger than the wall: cover is when you let the edges spill behind the furniture (no white wall showing). Contain is when you trim it to fit, leaving a margin of bare wall.
Learn more on MDN
HTMLREAD ONLY
PREVIEW