The image used in the following examples was downloaded from unsplash.com.
How to insert a background image
To insert a background image, you use the background-image property:
In the example, the background image is added to all divs on the page. As you can see if you look at the original image, the only part visible is a small section of the top left corner.
To place the background image on the whole page, use body as the selector.
The background-position property
If you want to change the section of the image to be shown, use the background-position property:
As you can see from the example above, another section of the original image is now shown.
The background-size property
If you want the image to "fit" into the container that it's in, use the background-size property:
As you can see from the example above, the full width of the image is now shown.
You can also use the value contain instead of cover, which will make for a different result:
Not really ideal here, but you might find it useful in other scenarios.
The background-attachment property
By giving the background-attachment property the value fixed, the image won't scroll with the page:
This will give you a paralax-like effect. Cool right?
- Add a background image to an element on your page and play around with the other background properties.