Lay a picture behind it to make a showpiece

01 / 05

The first impression of a page

Open a site and there is often a big picture with a few words right at the top. That one image gets across what kind of site this is.

It is made by laying a picture behind a tall box.

02 / 05

Put the place of a picture in background-image and it appears behind that box. The place goes inside the brackets of url(...).

There are three pictures ready for you.

.hero {  height: 280px;  background-image:    url(/samples/hana.svg);}

03 / 05

Left alone, the picture comes out at its own size and repeats. Three settings sort that out.

background-size: cover; … spread it across the box (whatever hangs over gets cut)
background-position: center; … line the middle of the picture up with the middle of the box
background-repeat: no-repeat; … do not repeat it

.hero {  background-size: cover;  background-position: center;  background-repeat: no-repeat;}

04 / 05

A background is laid behind the box, so words written inside that box come out on top of the picture.

So they do not lose against the colours of the picture, big and white is the standard choice.

.catch {  font-size: 40px;  color: white;  text-align: center;}

05 / 05

Go back to background-repeat: repeat; and set background-size small, and you get a pattern tiled across.

cover for a showpiece, repeat for a pattern. Pick by what you are after. Have a go.

.tile {  background-repeat: repeat;  background-size: 80px 80px;}