Replacing text with a background image affects printing

[Peter Foti]

I have seen lots of examples where some HTML text is replaced with a
background image using CSS. For example, replacing the text of an <h1> with
a graphical logo, like so:

CSS:
h1 span { display: none; }
h1 { height: 100px; background: url("mycompany. gif") no-repeat 35px 40px; }

HTML:
<h1><span>My Company</span></h1>

This allows the text version to be displayed for non-CSS browsers, and
allows a more visually appealing logo to be displayed for CSS enabled
browsers (assuming they don't have images turned off). One side effect of
this is that when the user prints, the default settings (at least with IE
6... I assume other browsers are probably similar) do not print background
images. So instead of seeing the graphical logo or the text, there is just
empty space.

Is there a good way around this? At the very least, I can get the text
version to print by adding the following CSS:
@media print
{
h1 span { display: inline; }
}

However, if the user configures his/her browser to print background images,
then BOTH the background image and the text are printed. Is there a
solution, or am I better off just putting the image in the <h1> (using the
<img> element instead of using CSS to add it as a background)?

Thanks,
Peter Foti

[Brian]

Peter Foti wrote:

I have seen lots of examples where some HTML text is replaced with
a background image using CSS. For example, replacing the text of
an <h1> with a graphical logo, like so:

CSS: h1 span { display: none; } h1 { height: 100px; background:
url("mycompany. gif") no-repeat 35px 40px; }

HTML: <h1><span>My Company</span></h1>

This allows the text version to be displayed for non-CSS browsers,
and allows a more visually appealing logo to be displayed for CSS
enabled browsers (assuming they don't have images turned off).
It is, of course, dangerous to make assumptions on the www.

(Caveat: I have used this technique, only once, and implemented it
carefully. Moreover, I consider the circumstances different from
most. I won't bore you with the details.)
am I better off just putting the image in
the <h1> (using the <img> element instead of using CSS to add it as
a background)?

I think you're better off using an img element inside h1.

--
Brian
follow the directions in my address to email me

[Philipp Lenssen]

Peter Foti wrote:

I have seen lots of examples where some HTML text is replaced with a
background image using CSS. For example, replacing the text of an
<h1> with a graphical logo, like so:

CSS:
h1 span { display: none; }
h1 { height: 100px; background: url("mycompany. gif") no-repeat 35px
40px; }

HTML:
<h1><span>My Company</span></h1>

This allows the text version to be displayed for non-CSS browsers, and
allows a more visually appealing logo to be displayed for CSS enabled
browsers (assuming they don't have images turned off).

Why not simply use the logo-image inside the h1 with alt-text "My
Company"? Works with or without CSS, with or without images.

--
Google Blogoscoped
http://blog.outer-court.com

[kchayka]

Peter Foti wrote:

I have seen lots of examples where some HTML text is replaced with a
background image using CSS. For example, replacing the text of an <h1> with
a graphical logo, like so:

CSS:
h1 span { display: none; }
h1 { height: 100px; background: url("mycompany. gif") no-repeat 35px 40px; }

HTML:
<h1><span>My Company</span></h1>

This allows the text version to be displayed for non-CSS browsers, and
allows a more visually appealing logo to be displayed for CSS enabled
browsers (assuming they don't have images turned off).

This particular method is a bad idea. Most modern screen readers will
apply the display:none property and end up with no h1 content at all.
See <URL:http://css-discuss.incutio .com/?page=Screenrea derVisibility>

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

[Stephen Poley]

On 19 Nov 2003 16:42:33 GMT, "Philipp Lenssen" <in**@outer-court.com>
wrote:

Peter Foti wrote:

I have seen lots of examples where some HTML text is replaced with a
background image using CSS. For example, replacing the text of an
<h1> with a graphical logo, like so:

CSS:
h1 span { display: none; }
h1 { height: 100px; background: url("mycompany. gif") no-repeat 35px
40px; }

HTML:
<h1><span>My Company</span></h1>

This allows the text version to be displayed for non-CSS browsers, and
allows a more visually appealing logo to be displayed for CSS enabled
browsers (assuming they don't have images turned off).

Why not simply use the logo-image inside the h1 with alt-text "My
Company"? Works with or without CSS, with or without images.

Agreed. Background images should be used for decoration only. Anything
containing information should be in the foreground.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Rijk van Geijtenbeek]

On Wed, 19 Nov 2003 11:13:19 -0600, kchayka <kc*********@si hope.com> wrote:

Peter Foti wrote:

I have seen lots of examples where some HTML text is replaced with a
background image using CSS. For example, replacing the text of an <h1>
with a graphical logo, like so:

CSS:
h1 span { display: none; }
h1 { height: 100px; background: url("mycompany. gif") no-repeat 35px
40px; }

HTML:
<h1><span>My Company</span></h1>

This allows the text version to be displayed for non-CSS browsers, and
allows a more visually appealing logo to be displayed for CSS enabled
browsers (assuming they don't have images turned off).

This particular method is a bad idea. Most modern screen readers will
apply the display:none property and end up with no h1 content at all.
See <URL:http://css-discuss.incutio .com/?page=Screenrea derVisibility>

At least for the printed version, the solution could be:

@media print {
h1 spam {display:inline ;}
h1 {background: none;}
}

But in general, I don't like idea. Not just for screenreaders; a simple
copy & paste also misses the hidden text. But if you really need a super
duper flashy website, it is a nice idea. I'll just go into User mode in my
browser when I actually need to work with the text...

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

[Peter Foti]

Thanks to all that posted. I will follow the advice and keep image logo's
in the content instead of making them presentational.

Regards,
Peter Foti