473,320 Members | 2,006 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Replacing text with a background image affects printing

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
6 3596
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Moon | last post by:
Seems I still haven't got the hang of all those window generating code in Javascript. I've got a page with about 15 photo thumbnails. When you click on a thumbnail a new window pops up which shows...
24
by: Markus Ernst | last post by:
Hi I have a title with a title gif: <h1><img src="mytitle.gif" alt="This is my title"></h1> So this is text-based browser and search-engine friendly and can be easily formatted with a style...
1
by: Andrew Poulos | last post by:
Say I have a page, which has been created by a third party, and the page may contain some pre-specified text. How can I find and replace that text dynamically? For example, if the page I have...
16
by: J. B. Moreno | last post by:
I read the faq, and it mentions that IE 4 on windows requires setting a printing option to allow background colors to be printed. Things change, life goes on, other browsers come into...
4
by: CG3000 | last post by:
I create a .PNG image ( in Macromedia Fireworks ) which has an gif in it in the top left corner and a lot of empty canvas space to the right. I use about 10 text boxes on a form to populate...
12
by: mi0sis | last post by:
Right now I am currently using this: ------------------------------------------------------------ .div0 { background-image:url(http://www.rubnip.com/Pictures/topback.gif);...
2
by: yogarajan | last post by:
hi i have create one html file. That file contains background image . but print preview time not display . i am go to tools -> internet options-> advanced options -> printing -> print background...
1
by: Star258 | last post by:
I have a few paragraphs on my site and an ul that I’ve set up with a css background image. I wanted the image separate from the main background and still have the ability to type on it. Is there a...
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.