Using CSS with images

A test page looking at the various ways to add images in elastic layout designs. Smileycat.com - Resizable Images Details methods for displaying an image that increases in size when text size is increased.

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.

Make PNGs transparent in IE6 with this script. - Under 1kb!. Fixes most link interactivity problems caused by IE’s filter attribute. Works on img objects and background-image attributes. Runs automatically without defining classes or calling functions. Allows for auto width and auto height elements. Simple to deploy.

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.

A neat and very simple little trick to pre-load images using CSS. Alternatively you can just use 'display: none' on the a div.

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

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.