Page Header
The examples in this Lesson make use of a simple Web page layout with a header, content area, and footer.Layout techniques such as this are explored in detail in the next lesson, so don't focus on those details here.
For this lesson, page layouts help demonstrate how background images can be used for different purposes.
A graphic can be inserted as a Background Image using CSS or as page content with the HTML img element.
All the Shaggy graphics are inserted as page content using the HTML img element.However, Scooby is put in this page as a background image using CSS.
The HTML img element doesn't give you many formatting options as Shaggy demonstrates.
Of course, inline with text is the default.
You can put the image in a block and use a text-align option (left,right,center) like below.
A previous lesson showed that floating images left or right will cause text to flow around images. But other than Shaggy's examples in this page, the HTML img element doesn't provide other formatting options.
However, placing an image using the CSS background-image style property offers much more flexibility. Scooby is placed behind this paragraph as a background image. As such, the image is technically not page content, but merely some colored pixels in the background. The graphics files for background images are just GIF, JPEG, or PNG formats with which you are already familiar. This example doesn't explain the CSS style properties used to place Scooby behind this paragraph in the page content block. Subsequent examples in this lesson supply more details and show various uses for background images.