Welcome to WebmasterWorld Guest from 54.167.175.107

Forum Moderators: not2easy

print.css to lose background image ?

   
8:59 pm on Aug 26, 2008 (gmt 0)

5+ Year Member



Greetings -

My site has a slightly complex structure -- 7 areas over a background image, and the background resizes to fit the browser size.

What I'd like to do is create a print.css file that omits the background image when the site is printed.

Can anyone provide sample stub code or point me to a useful tutorial?

And where is the print.css file supposed to reside? public_html? public_html/style? wherever the relevant .htm file is?

Thanks kindly.

- Richard

[edited by: expatCanuck at 9:00 pm (utc) on Aug. 26, 2008]

[edited by: tedster at 10:22 pm (utc) on Aug. 26, 2008]
[edit reason] no personal domains, please [/edit]

4:41 am on Aug 27, 2008 (gmt 0)

5+ Year Member



Providing the image is set as a background image, it will naturally disappear for printing. It's only inline images (images placed using the img tag) which will appear in the printed format.

To make an img disappear simple give it an id or class (like 'noprint') and set the display to none. For example:


/*print.css*/
.noprint
{
display:none;
}

As for where to place the print.css file - it can be placed anywhere really, so long as the directory can be reached by the public. If it were in the same directory as the file you would simply link to it by giving the name (eg. 'print.css') as the source. If it wasn't in the same directory - you could use a relative or absolute url to link it.

Look online for the relative and absolute urls and it should make perfect sense.

6:32 am on Aug 27, 2008 (gmt 0)

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Just write a second stylesheet and use the media="print" tag:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Then do as csuguy mentioned and hide elements you don`t want to print. So, for images, you would put this in the stylesheet:

img {
display:none;
}

dc

11:51 am on Aug 27, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There's no need for a second stylesheet, it can easily all go into your normal one:


#normal {
style goes here
}
@media print {
.interactive, #menu, #crum, .ads, .pictures {
display:none;
}
}
6:53 pm on Sep 1, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



while swa66 is correct, support for that method is not foolproof yet.. so I'd be inclined to go with a separate media sheet like dreamcatcher mentions, to me it is still the safest.. there is usually no need for the "noprint" classification using either method.. if it can be targeted in one sheet it can be targeted in another

in fact to be able to ad a "noprint" class you are back in the realms of having to know the final outcome at the time of original code input?

7:29 pm on Sep 1, 2008 (gmt 0)

5+ Year Member




in fact to be able to ad a "noprint" class you are back in the realms of having to know the final outcome at the time of original code input?

True - its not a necessary class. In truth I wasn't really thinking of the most effective approach - it was simply the one that came to mind first. I do believe it to be a good method to use in certain situations though.

1) it can be applied to any html element without having to add it to every single instance of that element.

2) When going through your code, you can easily tell which elements are not going to be printed.

Agreed, in most cases this isn't needed - but I like to defend my posts :D

8:17 pm on Sep 1, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



method is not foolproof yet

Interesting, I've been using this for some years, I've not had any trouble with it yet in any of the browsers I've tried.

What browsers don't support this ?

8:15 am on Sep 2, 2008 (gmt 0)

10+ Year Member



Providing the image is set as a background image, it will naturally disappear for printing.

Unless the user has set their browser to print background images.

You could force it to not print simply by adding [edit] to your print stylesheet [/edit]:

* { background-image: none; }

But do you really want to force such a thing when they have explicitly asked for it?

[edited by: Setek at 8:16 am (utc) on Sep. 2, 2008]

9:55 am on Sep 2, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



@swa66

I don't know :o and in fact I think I might be getting confused with the following method

@import "style.css" print;

it still has IE problems, I believe, definitely 6 possibly still 7?

maybe that's why I thought the @media command was flaky in IE6 too but perhaps it's not, I can't test/confirm either way as my standalone doesn't like it.. my apologies if I'm giving bad information

I still prefer the separation of using a separate sheet for screen and just letting the text default for print, or adding in a separate sheet/link if anything needs hidden for print - I always found the media specified in the <link> statement to be the most reliable.

I'm probably just retaining out of date info and there is a lack of up to date, authoritative, information out there on the various different media/import support methods :o - can you confirm support in IE6 for me maybe test against both methods (@import and @media) and let us know, thanks

the other browsers are probably getting it right now.. Opera had a problem but I think that was back in v7/8

10:34 am on Sep 2, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I tried this:

HTML:


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
[meta tags]
<link rel="stylesheet" type="text/css" href="/style.css" />
[conditional comments]
</head>
[body]
</html>

CSS:


body {
...
}
@media print {
.interactive, #menu, #crum, .ads, .pictures {
display:none;
}
}

in a copy of IE6 on XP in a virtual machine and an upgraded to IE7 copy of it and both worked fine as far as I can tell. These versions of XP are up to date on patches, but have no other software on them, nor are they used for anything but testing websites I crafted.

I've never seen trouble with it in versions of Opera I tested with, nor Safari (any version) neither in Firefox (any version).

I'll try the @import later, need to run now.

8:21 pm on Sep 2, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



thank you.. just goes to prove that the memory is not as it should be!

would you like to write on this? I know I'd be interested to learn

10:08 pm on Sep 2, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Checking up on the @import ... print stuff, I stumbled upon a page that has an excellent overview of both old and current browsers on this subject.

[codestyle.org...]

Test4 and test5 are the ones we were discussing here.

Note that it works in modern standards compliant browsers:
"No further results will be posted for Opera, Netscape/Mozilla and Safari, whose latest releases fully conform to the media style sheet standards. Results for Netscape 7.1 apply to all subsequent browser releases based on the Mozilla Gecko rendering engine, including Firefox, Galeon, Camino, Chimera, K-Meleon and Phoenix."

I'm pretty sure that redoing this is a substantial effort (merely finding those old browser versions is a challenge).

7:13 am on Sep 3, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Thank You for that link :)

yes would take a lot of work to redo, the tests are there for those who want to test the newer browsers, maybe just a check how the @import for IE8 is going as IE seems to be the only thing holding that method back now too

it was indeed my memory confusing '@media print' with "@import print" - old age doesn't come by itself you know :) - so @media embedded seems to be just as stable as the link method (test 1).. good news!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month