How can I force browsers to print background images in CSS?
You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.
How to forcefully print background image in HTML?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
@media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
How can I print background images in FF or IE?
Have you considered using a print stylesheet? This could 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 easier:
<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 stylesheets browsers should use by supplying a media tag, either by css or on the 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" />
How to get a background image to print using css?
It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img />
tag.
Print background image on every page once
If you specify the background-attachment property as fixed, it renders on every page. The only trouble with this method is that content can clip over top of it (and it only appears to work in FireFox).
<style type="text/css" media="print">
body
{
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position: right top;
background-attachment:fixed;
}
</style>
Another option is for your background image to share the ratio of your printable area (i.e. Letter size 8.5x11 paper with .5 inch margins on all sides is 7.5:10) and to have the logo in a field of whitespace (e.g. http://i.imgur.com/yvVW2mk.png). Then you set the image to repeat vertically and be 100% sized.
<style type="text/css" media="print">
body
{
background-image:url('/C:/whitespace-logo.png');
background-repeat:repeat-y;
background-position: right top;
background-attachment:fixed;
background-size:100%;
}
</style>
Related Topics
Why Does Border: 5Px Dashed Not Come Out as Dashed in Firefox
Fixed Positioning/Z-Index Issue in Mobile Safari
HTML 5 Page Without Main <Header>
Fill a Div with an Image Respecting Aspect Ratio
Why Setting Absolutely Positioned Element's Sibling as Position:Relative, Brings It Above The Former
Making Youtube.Com/Embed Urls Work on iOS
Extract Content of Div from Google Translate with Vba
What HTML/CSS Attributes Are Mail Safe
Flexbox Horizontal Menu Centering While Keeping Last Element to The Right Side
HTML 5 Input Type='Date' Disable Keyboard Input
Best Practice for Using Svg Images
Video Tag Src Not Picking Ftp Url as a Source
Enable Vertical Scrolling on Textarea
Firefox: :-Moz-Selection Selector Bug() Is There a Workaround
Post Request to Include 'Content-Type' and JSON