div background color in print page doesn't work

Question

I want use a div that has a background-color, but if I print the page it appears in white .

When I create a table using <tr bgcolor="#333333"> it also does not work.

How I can create a print page using css and html ?

My code :

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>

Fernandez

Is your web browser set to print backgrounds? What OS/browser/version? – Viyella

Is that your markup verbatim? You're missing a " on cellpadding. – Cohune

Also: Your HTML is broken in a marvelous variety of ways, both syntactically and poor development style. In short: validate your page; do not use tables for layout; separate your style from your content (don't put stylistic markup in your HTML). – Viyella

@Viyella - It's kinda harsh to say it's broken... – Cohune

@Jared I believe that's an excellent way to describe markup that is syntactically invalid, uses presentational attributes, uses incorrect values in some presentational attributes, mixes quoted attributes with unquoted, and uses tables for layout. – Viyella

@Viyella - broken implies what is demonstrated does not work. Using tables for layout works, presentational attributes works, not including a tbody works, and using different quotes (or omitting) works. I'm not saying it's best practice, but it's not broken. ;) – Cohune

@Jared Farrish: Look for example at cellpadding=0" bgcolor=", and say that it's not broken... – Rodolforodolph

@Rodolforodolph - I pointed that out in a comment; see the second comment. ;) And my point is that what the OP posted is not wholly and entirely broken, it's just not considered best practice. :) – Cohune

@Jared Farrish: In your own words: "broken implies what is demonstrated does not work". Several of the attributes in the table won't work. – Rodolforodolph

Let's just all agree that it's awful. – Druggist

@Wesley - Yes, I agree. @Rodolforodolph - Yes, that is not right (FF4 still interpretes it, btw). My point with Phrogz was that all of the list was not broken, only that the one thing was. However, that is not what Phrogz said. Hence, my comment. :) – Cohune

Possible duplicate of Background color not showing in print preview – Cycloplegia

Bootstrap uses @media print to make all printing b/w, so you may check that also. See "Bootstrap print CSS removes background color" (#33411224) – Alfonsoalfonzo

Answer 1

I would look into the media query way of targeting a stylesheet to the print. I don't believe you will find a common way cross-browser of doing what you want to do (control whether the user's printer prints a background) without using PDFs of your content, which may not be desirable/doable. However, you should consider specially handling your print styles and perhaps avoid backgrounds in your design of the printed page.

http://www.w3.org/TR/css3-mediaqueries/

EDIT

Seeing your other comment, if you have to make the backgrounds print and have a single user, teach your user to make the printer print backgrounds. See for example in Firefox (checkbox):

Cohune

i have a form that user write information and form must printed like a photo in paper. Can I use the HTML language for this project or no? – Fernandez

@ebad - I'm not sure what you mean by 'like a photo in paper'. If you hit the checkbox on Print Background, does it work like you expect? – Cohune

@ebad - And no, typically doing fine-grained printing in HTML is not a great idea; it's just not setup for that. Use PDF's if you can; that's what happens usually when you need that kind of control. – Cohune

With Safari and Google Chrome you can just add the css style "-webkit-print-color-adjust: exact;" to the element that needs the background to be printed. – Amazement

what about embedded browser. If i have no direct option for settings this up? – Stutsman

Answer 2

CSS: box-shadow: inset 0 0 0 1000px gold;

Works for all browsers and on table cells and rows.

Tisbee

That's evil... +1 (also it worked for me in a div, using chrome, haven't checked other browsers because I don't really care for this project) – Kinnikinnick

Answer 3

Background colors and images don't print by default.

It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).

Toluol

This answer is overly broad. What OS/browser/version are you describing here? What you have said is not true for all browsers. – Viyella

and if my user don't public , how i can change setting of printer ? – Fernandez

@ebad Your comment/question is not clear. Could you try to rephrase it? What do you mean by "if my user don't public"? – Viyella

We're talking about printers, not about browsers. The reason why backgrounds are not printed by default is quite simple - economy. The ink is not cheap. There are numbers of discussions about this topic on the web. The summary is always the same: "I don't want to be forced to print background. If I wan't to print it, I do switch it in my printer settings". – Toluol

@Viyella : my user is a person that want use this page in personal computer and don't upload in internet – Fernandez

You can ask your user to print page with backgrounds from IE - set "Tools" | "Internet Options" | "Advanced" - section "printing" - "allow printing of backgrounds and background images". Still, I can not confirm as this will behave in the same way in every environment. – Toluol

@ebad Then simply tell your user to turn on the option for "Print Backgrounds and Images" when printing. – Viyella

Answer 4

In Crome "-webkit-print-color-adjust: exact;" works for me.

Use:

@media print {
    .collage_bg {
        background-color: #E6E7E9 !important;
        -webkit-print-color-adjust: exact; 
    }
}

Or Check Background Graphics option:

Both options working fine for me.

Cycloplegia

Works great in Chrome; Works great for wkhtmltopdf as well. That's to be expected, but hopefully this will help for those arriving via Google, since the --background option didn't work in that tool. – Chacma

Answer 5

Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image.

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>

Indication

this worked for me printing inside android app via google cloud print – Vasiliki

Answer 6

You could however always use an image for that. Make an image with a width of 1px and repeat it like this:

background: url('path/to/image.png') repeat-x;

Aridatha