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>
  

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>

For (a little) more information …

• A Web building tip... - saila.com by Craig Saila at saila.com
• styling <hr> Marek Prokop (last update 6/14/2002)

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>

,
,
.

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