How to print background images in FF or IE?

Question

Is there any way to set ff and i.e. print background images?

I use a star image to classify some skills, and I set it as a background image and positioned it or set one start, two, three, etc. When I try to print the page, the images disappear.

So, is there a way to make them visible when I print a page, or at least a way to replace images * or something that will be visible?

Answer 1

Have you considered using a print style sheet? This may allow you to do something like:

<div class="star">*</div> /* media:screen */ .star { background: ...; overflow: hidden; text-indent: 9999em; } /* media:print */ .star { text-indent: 0; } 

or even simpler:

 <div class="star"><img src="./images/star.jpg" alt="*" /></div> /* media:screen */ .star img { visibility: hidden; } /* media:print */ .star img { visibility: visible; } 

You can specify the stylesheets that browsers should use when delivering the library, either with css or with a link element:

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

Answer 2

In Firefox, go to File => Page Setup. There is a checkbox "Print background (color and image)." Just check it out and everything should be installed.

Answer 3

In your print.css file, change the background image to a list item.

So:

 .background { display: list-item; list-style-image: url(yourbackgroundimage.gif); list-style-position: inside; } 

This method is described in more detail: http://www.web-graphics.com/mtarchive/001703.php

Answer 4

In fact, I found the answer quite simple.

Situation: I had a div tag with a background image. What will not print when printing.

Decision:

• Create another stylesheet called "print.css"

• Add the following line of code to all your web pages right after the link to the original css link:

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

• Immediately after your original title without printing, add the following:

   <div id="header"></div> <!-- YOUR NON PRINTING HEADER --> <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div> 

• In your style.css file, which is the basic CSS style for your site, add the following line:

   #printheader {display: none; } /* Makes the print header not visible */ 

• In your print.css file, add the following code:

   #footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */ #container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */ #printheader {display: block; } /* Turns ON the div when printing */ 

What you do essentially disables the title on a regular screen page and turns on the print head when you make a print call.

** Please note: you will need to modify the print.css file to include other elements of your style.css file to format fonts, colors, etc. Play with "Preview" and add the items you need until you get the printout you were looking for.

Answer 5

For IE http://support.microsoft.com/kb/980077

There should be something similar for FF.

ps you can not install this for customers!

ps2. you can replace these stars with foreground images (absolute, if necessary) in css (media = "print").

Answer 6

Do not use background-image to display printable images, use the regular <img> tag instead.

background-image intended for unimportant images, which most modern browsers tend to skip during printing (default setting in IE 11, Chrome 35, FF 30).

Why do n't you use the img tag?

• Alignment problems . Use absolute positioning to solve alignment problems.

• Sprite - Sprite is possible with simple img and div tags.

• Making image preservation more difficult for the user is also possible with simple img and div .

• To “keep my HTML clean” - does any of the workarounds really make it cleaner for you? Throw it :)

Answer 7

I had the same issue with IE not supporting background printing.

So, I created 2 divs, one div had a higher Z and had text content. The second div was just behind the front of the div, but with a lower Z index and had an image (img not a background image) for a width and height of 100%. Therefore, when I showed 2 divs together, it looked like one div because they overlapped perfectly. When I print in the IE browser, it displays with the image because the image is not a background image, but a regular img tag that fills the bottom div.

some code.

 <div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div> <div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;"> <!-- provides the background image for ie browser so that it does not show the lower level divs. --> <img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" /> </div> <script language="javascript" type="text/javascript"> function showSurvey(surveyResponseId) { var e = document.getElementById("survey"); var bkgd = document.getElementById("surveyBackground"); var focusinput = document.getElementById('focusinput'); var nh = 'data-nohide'; if (e.style.display=='none') { e.style.display='block';//show div bkgd.style.display='block';//show div } focusinput.focus();//set focus so we know when they click outside e.onclick = function(e) { this.style.display='none';//hide div if they click on it bkgd.style.display='none';//show div }; //if the user press ESC focusinput.onkeyup = function(e){ if(e.keyCode === 27){ var survey = document.getElementById("survey"); var bkgd = document.getElementById("surveyBackground"); //hide the div survey.style.display = 'none'; bkgd.style.display = 'none'; this.removeAttribute(nh); }else{ //do something else with other keys(ie:down, up, enter)... focusinput.focus(); } }; //click somewhere else input onblur // was taken out because the browser print function would close the survey div page. //focusinput.onblur = function(){ // if(!e.getAttribute(nh)){ // //hide the div // e.style.display = 'none'; // } //}; var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId; YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground}); } var showBackground = function() { var e = document.getElementById("survey"); var bkgd = document.getElementById("surveyBackground"); bkgd.style.width = e.innerWidth(); bkgd.style.height = e.innerHeight(); bkgd.style.left = e.offsetWidth(); bkgd.style.top = e.offsetHeight(); } window.onload = function() { var focusinput = document.getElementById('focusinput'); focusinput.focus();//set focus so we know when they click outside } </script> 

in CSS put this

 .surveyResponseWindow { width:500px; height:600px; z-index: 2; position: absolute; top:100px; left:150px; border:1px solid #AAAAAA; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; box-shadow: -1px 7px 15px -2px #000; } .surveyBackgroundDiv { z-index: 1; position: absolute; top:100px; left:150px; width:500px; height:600px; border:1px solid #AAAAAA; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; box-shadow: -1px 7px 15px -2px #000; } 

Answer 8

I believe this is a browser setting, not a backend for websites. However, I could be wrong.