By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,179 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

Replacing text with a background image affects printing

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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

Jul 20 '05 #2

P: n/a
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
Jul 20 '05 #3

P: n/a
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=ScreenreaderVisibility>

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Jul 20 '05 #4

P: n/a
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/
Jul 20 '05 #5

P: n/a
On Wed, 19 Nov 2003 11:13:19 -0600, kchayka <kc*********@sihope.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=ScreenreaderVisibility>


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
Jul 20 '05 #6

P: n/a
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
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.