Structure: Using CSS to work with images and color in html documents

Transparent images

If an image has transparent sections, a background image or pattern can be placed behind the image that will show through

This typically happens with .gif and .png formats

The markup for this property looks like this:

img { background: url(image/location/goes_here.html) }

Floating images and wrapping text

Images are typically shown inline if small, and, if larger, on a line of their own, aligned left, right or center

Text can also wrap around images

We've seen the float property used to position images

The image abuts the parent's edge

img { float: left }

If there's room, two images with this declaration will be side by side

If there's no room, two images with this declaration will be stacked along the margin

The <clear> attribute prevents the images from being placed side by side

Positioning images with margins

By changing the image's margin, you can move it around:

If the image floats left, increasing the width of the left margin moves the image to the right

If the image floats right, increasing the width of the right margin moves the image to the left

The markup might look like this:

Here's an example:

Because of the use of the <float:left> property, the image is moved to the left and text is allowed to wrap around it on the right side of the image

Because of the <margin-left: 50px> property, the image floats to the left but is positioned 50 pixels to the right of the left margin

If a <margin-left: XXpx> property were to be added to this declaration, the text would still wrap but would be pushed to the right by the number of pixels specidied in the declaration

Resizing images with width and height

If you have to change the size of an image, you can use width and height properties

You have to be careful not to distort the image by resizing it in such a way as to violate its original proportions

The markup might look like this:

<img src="maczilla.gif" style="width: 25%; height: 25%" />

Here's the image:

And here it is stretched:

If only one value is set, the other is automatically resized:

The markup might look like this:

<img src="maczilla.gif" style="width: 50%" />

Here's the image stretched:

There is another margin value, called auto, which allows the browser to set the margins

When used with an image and set for both margins, the image will be centered

The markup might look like this:

Here's the image:

This property is not yet supported by browsers

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssimages1.html
Last updated 3.15.06 - H. Rosenbaum