images

Images that are Content: Inserted in HTML

Let’s assume you came to this site to buy a pattern to crochet a vest. You would expect to find images that show you the patterns available, like this one, which was placed in the html in DW with Insert > Image : chrocheted red vest Or maybe you're in the market for a new old TV, you'd expect to find a picture of it like this one: old tv Both of these are images would be content for their respective sites, so they get inserted straight into the html. View source to see what I mean.

Presentational Images: Inserted in CSS

Maybe you went to a web site that sells phones like the kind that grandma used to use. You'd expect to see an image of it, like this one: To make it more appealing and engaging for you and your nostalgic spirit, below, it is presented over a background, which is not content itself, but presentational. The background image gets placed through a CSS rule.

Other examples of presentational CSS images placed on this page are the background pattern for the page itself (a lightweight slice of the striped pattern is loaded once with the body CSS selector and told to repeat) as well as the seal of endorsement in the corner of the page.

old rotary phoneYou can also float images, (or other elements) to the left or right within their containing element to get text (or other elements) to behave like a text wrap. Here, the image is set to 'float:left' so that the subsequent content can wrap around its right side. DIVs themselves can be position with floats, too. In fact, entire layouts can be built using the float property using different widths for elements and the sister property 'clear'.
View the site's external CSS