Tutorials on using CSS with images

Centering an image of unknown size in an outer container of known size.

Centering an image using the background-image CSS property.

Floating an image in a block of content without the content wrapping around the image.

Works in IE5+ Win & Mac, Op7+, Saf (using inline-block), Moz (using -moz-inline-box). Variable size images inside fixed width (yellow) containers flowing (in a horizontally centered way) inside a (gray) fluid container.

Adding images that adapts to the browser window’s size. Uses JavaScript for IE.

A test page looking at the various ways to add images in elastic layout designs.

An overview of resizing images by specifiying the dimensions in EMs.

Embedding flash movies with no height or width attributes then setting the width and height using CSS, specifically using EMs so that the dimensions are elastic.

A tutorial on using CSS to replace text with images. This is a consolidation of the improvements to the Fahrner Image Replacement technique.

An overview on using CSS to replace text with images. This explores improvements to the Fahrner Image Replacement technique.

Another overview of replacing different elements with images.

Another method of replacing text with images. More options than some but cannot use transparent images. There's also Clickable link image replacement without active/focus border.

This markup sets up the print-friendly logo as the default image and as the H1 heading on the page. It then replaces the replaced element (img). The alt text is still available with CSS on and images turned off.

A technique using CSS and PHP to create a background image replacement that randomly rotates through an array of images.

A neat and very simple little trick to pre-load images using CSS.

Using CSS to create image loading place holders for larger images.

Using a .htc file to give full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds.

Png images can support alpha transparency channels (32-bit). Unfortunately, IE (up to version 6.0) doesn't like it. This tutorial explains a work around.

Stacking two images in one single IMG element to produce overlay transparency.

Add PNG alpha transparency support to Internet Explorer using some JavaScript and CSS filters.

Add a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF. It applies an absolutely positioned DIV with a PNG backround over the top of a regular image, so you still get alt attribute / value pair, as well as printing images.

Using CSS to produce a panoramic image you can scroll through.

Enable users to view the detail of a picture using CSS.