This Scooby is set to be fixed 
          so it won't scroll with the page. 
          Remove this text and it looks better.

Page Header

The Scooby in this header block uses percentages to set its exact background-position within this block.
The one just below it on the right of the main content block is positioned simply as "top right".
See the source code to compare the two Scoobys to the right.

CSS Background Images set to not background-repeat do not tile.

This example places at most 1 background image per block, which was the limit for many years.
There are ways to place more than one background image per block, but that is beyond the scope of this lesson.

Columns are often used to position images as shown below.





Here Shaggy is inserted and positioned as a background image.
Since each column is it's own block, it is easy to put a background image in each column.

In the left column, Shaggy is positioned in the middle of the block using the CSS background-position property.

In the right column, it would not be easy to center Shaggy within the block.
Shaggy Looking Scared Here Shaggy is inserted as page content with an HTML img element.


Background images do not count as block content, so this block will not grow vertically to accomodate the background image.
This block only has enough content to reveal the top part of Scooby.


There is actually another block just below this text that has Scooby as background.
But you can't even see Scooby because there is no block content. (Or he is hiding from a ghost.)


You can create an interesting effect by making an image less opaque using the CSS opacity property as shown to the right.
This can create an effect like a watermark - a faintly visible image.
As you can see, you probably don't want to put text in the same block you use to adjust the opacity.