Jan's Examples of Background Images and Colors

Look at the source code to see how these effects were created.

BODY uses a tiled background image of raindrop shapes.

Click the items below to show the effect. Click again to hide.

• Paragraph with background color

  What happens when the window is too narrow for the one line of text? Is your window narrow enough for this text to wrap?
  A line break makes this line start at the left again.

• Two paragraphs with background image

  This paragraph has a background image that looks like silk fabric. It is tiling across the page but only for this paragraph. There is a line break before the next sentence, not a paragraph break.
  What happens when the window is too narrow for the one line of text?

  This is a separate paragraph with the same background as the one above. The backgrounds did not connect!

• DIV with background color and nested DIV with background image

  This is a DIV which has a background color and a set width too.

  As text continues inside the DIV tag, the background automatically continues also, even for new paragraphs.

  This paragraph is inside a DIV that is inside the other one. The DIV tag has a CLASS attribute, notebook, which sets an image background.

  We needed to scoot the text over with margin-left to keep it off the spiral notebook wires. The P has a CLASS attribute, scootover, which does this.

  This paragraph is back outside the notebook DIV but is still inside the DIV with the colored background.

 This paragraph is outside the DIVs above.