CS3172 > 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>
  

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 …

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

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

Version:

20 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)

article at mezzoblue

Last updated 21 March 2004

funky image

by Jamie Blustein