CSS Backgrounds

Background image

Set an image with background-image: url(...). By default it tiles (repeats). Control that with background-repeat, background-position and background-size.

<style>
  .hero {
    background-image: url('https://picsum.photos/800/300');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px; color: white; padding: 20px;
  }
</style>
<div class="hero"><h2>Hero Banner</h2><p>cover + center + no-repeat</p></div>

This is the recipe behind almost every website banner. Going line by line inside .hero:

• background-image: url(...) — loads the photo into the box.
• background-size: cover — scales the photo so it fills the whole box, cropping any overflow (no blank gaps).
• background-position: center — keeps the most important part of the image centred when it crops.
• background-repeat: no-repeat — stops the image tiling; show it once.
• height, color, padding — give the box a size, white text and inner spacing so the heading sits comfortably on top.

The shorthand

Combine everything into one background property to save space.

<style>
  .box {
    background: #4338ca url('https://picsum.photos/40') no-repeat right center;
    color: #fff; padding: 24px; border-radius: 10px;
  }
</style>
<div class="box">Shorthand: colour + image + no-repeat + position</div>

The single background property packs four things into one line, read left to right: the colour #4338ca, the image url(...), no-repeat so it shows once, and right center as its position. It does exactly what four separate background-* lines would — just shorter. The colour shows wherever the small image does not cover.