2011-11-29 22:04, Angela French wrote:
I am trying to make an image as a background on an h1.
Here is my test page: http://sbctc.edu/college/_i-ctclinkTEST.aspx .
It works fine, but is there some way to make the text display if images are off?
I'm afraid there isn't:
"Most image replacement techniques suffer from serious accessibility
problems for users who turn images off [...] but CSS on."
http://css-discuss.incutio.com/wiki/Image_Replacement
Is there any reason not to use the simple method, which does not need
CSS at all but may be augmented with it:
<h1><img alt="C.T.C. Link" src="/imgs/it/ctcLink.jpg"></h1>
You would then probably want to set
h1 { margin: 0; }
h1 img { vertical-align: bottom; }
to remove the default margins and the effect of the image sitting on the
baseline of text; they could disturb the layout when the image is used
(normal case).
You could additionally have font and color settings, which would mostly
have no effect on the image but would style the text (on good browsers
at least) when the alt text is used instead.
However, font size would affect the height, so it would probably be best
to set the h1 element's line-height to the height of the image, e.g.
h1 img { line-height: 32px; }
This means that the font size should be something that probably sits
well for that line-height. This could even be one of the rare cases
where they are good reasons to set the font size in pixels in an author
(page) stylesheet.
This approach also means that when the page is printed, the heading is
included, as an image (when images are on) or as (styled) text. Image
replacement techniques may fail on printing: the heading isn't there at
all, as an image or as text.
Yucca
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
