Styling Backgrounds

We will get more into styling backgrounds next topic with CSS, but for now, you can do basic styling using various background properties.

Many structural elements can have background property values. If you have a busy page background, it is helpful to add a neutral background to a container (like a div) to keep your content legible and clean.

Adding a Background Color

A color fill can be created using the background-color property. You can use many English CSS color names, such as “white,” “orange,” “black,” etc. Check out available color names on W3Schools.

.a-class {
  background-color: ;
}

Adding a Background Image

You can easily generate a pattern on your background by adding a small image (less than 150px or so) and the background-image property, where you can use a relative URL to an image in your directory.

.a-class {
  background-image: url("#");
}

Example

See how you can add pizazz with background-color and background-image styling!

Neat-O Like you saw on the previous page, adding a pixel amount to the padding: ; property within your chosen element can give cushion between the boundary of the container and the contents inside.