CS4173 > Mats > examples/ > in-class/ > image trick

J. Blustein

Web-centric Computing

[Crs | Ann | Mats | Res]

In-class Examples

Image Replacement Trick

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.

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 not 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.

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>

For (a little) more information …

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

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

This webpage uses valid XHTML 1.0,
This webpage uses valid cascading style sheets

Credits
floral banner
Used with permission from ghost's Graphics Pages (link to ghost's Main HTML Page)
article at mezzoblue
Last updated 21 March 2004
funky image
by Jamie Blustein