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

html code background image

CSS

css code background image

RESULTS

background image example

NOTES


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

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved