Styling Backgrounds

We will get more into styling backgrounds when we formally talk about CSS, but for now, you can do basic color 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. We just did this in the previous section!

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.

HTML 
<div style="background-color: green;">

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.

HTML 
  <body style="background-image: url("#");">

Keep in mind that the image can be something on your site or something external. Use a relative URL if you have the image in your image subdirectory. Use an absolute URL if you are linking to an external source (i.e. should start with http or https).

Example

See how you can add pizazz (I know, I know, it’s busy!) with background-color and background-image styling!

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.