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>

Is your web browser set to print backgrounds? What OS/browser/version? — Phrogz, Jul 01 '11 at 21:34
Is that your markup verbatim? You're missing a `"` on `cellpadding`. — Jared Farrish, Jul 01 '11 at 21:35
Also: Your HTML is broken in a marvelous variety of ways, both syntactically and poor development style. In short: [validate your page](http://validator.w3.org); [do not use tables for layout](http://phrogz.net/CSS/WhyTablesAreBadForLayout.html); [separate your style from your content](http://phrogz.net/CSS/HowToDevelopWithCSS.html#separatestyle) (don't put stylistic markup in your HTML). — Phrogz, Jul 01 '11 at 21:37
@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. — Phrogz, Jul 01 '11 at 21:40
@Phrogz - *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*. ;) — Jared Farrish, Jul 01 '11 at 21:44
@Jared Farrish: Look for example at `cellpadding=0" bgcolor="`, and say that it's not broken... — Guffa, Jul 01 '11 at 21:50
@Guffa - 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. :) — Jared Farrish, Jul 01 '11 at 21:51
@Jared Farrish: In your own words: "broken implies what is demonstrated does not work". Several of the attributes in the table won't work. — Guffa, Jul 01 '11 at 21:54
@Wesley - Yes, I agree. @Guffa - 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. :) — Jared Farrish, Jul 01 '11 at 21:58
Possible duplicate of [Background color not showing in print preview](http://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview) — Govind Samrow, Jul 23 '16 at 16:09
Bootstrap uses @media print to make all printing b/w, so you may check that also. See "Bootstrap print CSS removes background color" (https://stackoverflow.com/questions/33410724/bootstrap-print-css-removes-background-color) — Chesare, Apr 22 '20 at 15:25

score 28 · Answer 1 · 2013-10-03T21:44:20.617

28

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

Works for all browsers and on table cells and rows.

edited Oct 03 '13 at 21:44

answered Oct 03 '13 at 04:32

1

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) – Shadow Sep 15 '16 at 01:00

Jared Farrish · Accepted Answer · 2011-07-01T21:56:00.790

25

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):

print backgrounds dialog Firefox

edited Jul 01 '11 at 21:56

answered Jul 01 '11 at 21:50

Jared Farrish

48,585
17
95
104

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? – Ebad ghafoory Jul 01 '11 at 21:58
@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? – Jared Farrish Jul 01 '11 at 22:00
@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. – Jared Farrish Jul 01 '11 at 22:01
3

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. – Marco Bettiolo Jul 02 '12 at 15:39
what about embedded browser. If i have no direct option for settings this up? – Naxos84 Jan 15 '16 at 13:06

score 18 · Answer 3 · answered Jul 01 '11 at 21:38

18

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).

answered Jul 01 '11 at 21:38

Marek Musielak

26,832
8
72
80

1

This answer is overly broad. What OS/browser/version are you describing here? What you have said is not true for all browsers. – Phrogz Jul 01 '11 at 21:39
and if my user don't public , how i can change setting of printer ? – Ebad ghafoory Jul 01 '11 at 21:40
@ebad Your comment/question is not clear. Could you try to rephrase it? What do you mean by "if my user don't public"? – Phrogz Jul 01 '11 at 21:43
7

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". – Marek Musielak Jul 01 '11 at 21:43
@Phrogz : my user is a person that want use this page in personal computer and don't upload in internet – Ebad ghafoory Jul 01 '11 at 21:48
1

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. – Marek Musielak Jul 01 '11 at 21:58
1

@ebad Then simply tell your user to turn on the option for "Print Backgrounds and Images" when printing. – Phrogz Jul 01 '11 at 21:58

score 17 · Answer 4 · answered Jul 23 '16 at 16:08

17

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.

answered Jul 23 '16 at 16:08

Govind Samrow

9,981
13
53
90

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. – pbristow Nov 09 '18 at 03:26

score 2 · Answer 5 · answered Jan 09 '13 at 15:13

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>

this worked for me printing inside android app via google cloud print — sobelito, Sep 05 '16 at 11:43

score 1 · Answer 6 · answered Jul 17 '12 at 13:50

1

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;

answered Jul 17 '12 at 13:50

Boyye

301
1
9

div background color in print page doesn't work

6 Answers6

Linked