CSS Background Color

background-color fills the area behind an element’s content. It is probably the property you will use most after color.

1
2
3
4
5
6
7

<style>
  body { background-color: #fff8f2; }
  h1 { background-color: #d94a00; color: white; padding: 10px; }
  p  { background-color: #ffe9dc; padding: 8px; }
</style>
<h1>Studio Notes</h1>
<p>A paragraph with a soft orange background.</p>

What the color covers

The background fills the content and the padding, and runs underneath the border. It does not fill the margin. If you want more colored space around the text, add padding. That is covered in CSS Padding.

1
2
3
4
5
6

<style>
  .a { background: #d0e8f2; }
  .b { background: #d0e8f2; padding: 20px; }
</style>
<p class="a">No padding: the color hugs the text.</p>
<p class="b">With padding: the color has room to breathe.</p>

Block or inline matters

A p or div is a block and its background stretches across the full width. A span or a is inline and its background only wraps the text. You will see why in CSS Display.

The page background

Put background-color on body to set the page color. Always pick a text color that stays readable on top: see Choosing Readable Colors.