CS3172 > Mats > examples/ > CSS/ > image trick

J. Blustein

Web-centric Computing

[Crs | Ann | Mats | Res]

Some Example Code

Image Replacement Trick

An Example of Progressive Enhancement

1. Demonstration #1 (text)

   <style type="text/css">
     h4#replace   {background:url(funky-title.gif) no-repeat;
                  height: 60px}
     span.remove {position:absolute; left:-500em}
     div.demo    {border: thin dotted blue}
   </style>
   <!-- ... -->
   <div class="demo">
    <h4 id="replace">
     <span class="remove" >Funky title<br />as text</span>
    </h4>
    <p>The first paragraph under the funky title.</p>
   <div>
  

Funky title
as text

The first paragraph under the funky title.

Differences

If you are having trouble seeing the effect then you might benefit from viewing a screen capture (from a narrow Netscape window).

2. Questions & Points to note

  1. Why do we need to specify a size for the container?
  2. What is a container?
  3. What happens if the browser understands CSS but will not display images?
  4. What is the impact on search engines?
  5. Why is a slightly different techique needed for the <hr /> below?
For more details…

See Revised Image Replacement by Dave Shea at mezzoblue; and Graphical headings by Levin Alexander.

3. Demonstration #2: (<hr />)

   <style type="text/css">
     hr#decorative {
        background: url(flow28.gif) no-repeat;
        height:54px; width:600px;
        /* without clipping the original HR is diplayed over in MSIE */
         clip:auto; overflow:hidden
       }
   </style>
   
   <div class="demo">
     <hr id="decorative" />
   </div>

Differences

If you are having trouble seeing the effect then you might benefit from viewing a screen capture (from a narrow Netscape window).

For (a little) more information …
All Screenshots

Comparisons of the webpage components with and without CSS are available as images.

Applicability

Note that these techniques are suitable only for HTML and XHTML 1.0 and 1.1 because XHTML 2's src attribute will be available on any element.


http://www.cs.dal.ca/~jamie/CS3172/examples/i-class/image-trick/image-background.html

Version:
25 March 2005
CS 3172 Prof.:
J. Blustein <jamie@cs.dal.ca>

This webpage uses valid XHTML 1.0,
This webpage uses valid cascading style sheets,
This page includes XFN meta data (so it is `XFN Friendly').

Credits
floral banner
Used with permission from ghost's Graphics Pages (link to ghost's Main HTML Page)
Downloaded 20 March 2005
ghost's divider images are at <URL: http://www.geocities.com/ResearchTriangle/Node/1533/divide1.html>.
article at mezzoblue
Last updated 21 March 2004
Tantek's favelet
downloaded on 24 March 2005
funky image
by Jamie Blustein