CSS GFX header

Graphical background headers are particularly useful if you plan to create an accessible site without neglecting design aspects. (For more CSS inspiration visit CSS Zengarden.)

What the code does:
1. Create an image and get the path and name of that image
2. Create a h1 tag with the headline text inside
3. Wrap this 2. in a DIV tag
4. Attach the latter created image with the path as background style to the DIV tag
5. Finally override the object in content.default with our object to apply that code actively (see the code in action in this site)

Do not forget: Set the h1 tag to visibility:hidden in your stylesheet, otherwise it won't work properly.

  1. # create a graphic header image and return path and filename
  2.  
  3. cssgfx1 = IMG_RESOURCE
  4. cssgfx1 {
  5.   file = GIFBUILDER
  6.   file {
  7.   XY = [10.w]+10 ,20
  8.   maxWidth = 500
  9.   backColor = #FFFFFF
  10.   reduceColors =
  11.   10 = TEXT
  12.   10 {
  13.     text.current = 1
  14.     text.crop = 50
  15.     fontSize = 13
  16.  
  17.     # leave font file empty to use default font (Verdana)
  18.     fontFile =
  19.     fontColor = #817D76
  20.     fontColor = #5D7BA1
  21.     offset = 0,17
  22.   }
  23.   }
  24. }
  25.  
  26. #create DIV tag with invisible text <h1> inside and the previously created image as background.
  27. chead = COA
  28. chead.wrap=
  29. chead.1 = TEXT
  30. chead.1.value=<div style="background-image:url(
  31. chead.5 = TEXT
  32. chead.5 < cssgfx1
  33. chead.7=TEXT
  34. chead.7.value=); background-repeat:no-repeat; background-position:left top;"><h1>
  35. chead.10=TEXT
  36. chead.10.field=header
  37. chead.20=TEXT
  38. chead.20.value=</h1></div>
  39.  
  40. # override standard gfx header with our chead object
  41. lib.stdheader.10.1 < chead
  42.  
  43.  
Last update: 15.10.2005

Did this document help you?

Yes: Write us what helped you

Ok, but: Suggest improvements, report inaccuracies etc.

not helpful: Tell us what would have helped