Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Styling Property : Background Image

You can add a background image to the entire page, a section of the page, or other elements aside. You may want to use the opacity property of your image in order to read the text on top of it.

Think of a background image as a "backdrop". It's not supposed to be the main focus but it definitely adds to the message as seen in the example below where a background image was applied to a div element that has a h3 element in it with text reading "Camping & Coding".

Style HTML Elements with a Background Image


html code background image


css code background image


background image example


In this example, an image is used for the background of a div container and then text is added to the inside of the box and positioned so that the text does not overlay the graphic of the computer monitors.

If you hover over the image and try to save it, you won't be able to because it is a background image.

Camping & Coding

Take a few moments and practice adding a background image to one of your div tags.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143


Campsite Coders logo in footer

Copyright 2023 . All rights reserved