#1
  1. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189

    How To Force CSS Background Color To Print Cross Browser


    Is there any way to force a background color to print in all browsers or at least IE & FF? In the past I have just used an actual image; instead of a background color, but I was wondering if there was a 100% sure way to do this. I tried using media="print" and !import - neither of these worked. So if there is a will, place let me know the way.
  2. #2
  3. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    105
    Originally Posted by web_loone08
    I tried using media="print" and !import
    Did you really use !import ? Make sure you write !important -- the full word.

    Still, I would have thought having a background color in the "print" CSS should do the trick, but perhaps there are bugs. Someone else will need to set us straight on that, or do a Google search like "print CSS background color problems".
    Simple is beautiful.
  4. #3
  5. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189

    !


    Originally Posted by Arem
    Did you really use !import ? Make sure you write !important -- the full word.

    Still, I would have thought having a background color in the "print" CSS should do the trick, but perhaps there are bugs. Someone else will need to set us straight on that, or do a Google search like "print CSS background color problems".
    yeah; i did use !important; i just typed it wrong on here - was thinking about @import for external files. did something like this:

    Code:
    <style type="text/css" media="print">
    .header {
    background: #000 !important;
    }
    </style>
    but that did not cut it. yeah i googled it, but not allot of luck - for the most part; from what i took, from the articles i read; that css background color printing was based on the user's browser settings. i took it that i could not force the background color to print.
  6. #4
  7. /usr/bin/drinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2004
    Posts
    718
    Rep Power
    1889
    I always thought that the browser print background was a check box option in the browser's print settings. Most browsers by default have is unchecked. If it's unchecked I always thought that mean it would override whatever the web page has set. After all, not every user wants to waste their printer ink printing background color.

    Comments on this post

    • Akh agrees
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189
    yes, this is true - but i wanted to know if there is anyway to override the browser setting and force background color to print. i sometime would like to have certain background colors to display in the print out version of a web page. there are instances where the background would make the print layout look better; then it would if the background color was not present. plus what if the end user does not know about the settings in their browser; that will allow them to either print or not print out background colors - they could be missing out on the print layout visual effect.
  10. #6
  11. /usr/bin/drinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2004
    Posts
    718
    Rep Power
    1889
    web_loone08, while it's true that they might be 'missing out' on the print out looking better, what if they only have a b/w printer. Printing out the background colors might just end up causing them to print a whole heap of black and waste their printout (and ink). As I said before, I'm 99% sure it can't be done via the webpage, and has to be done in the browser print settings. If you want viewers to be able to print the background colors, then the best option would be to add instructions to your site on how to change the browser print settings to print the background colors.
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189
    well the bg color i wanted to print out was black and the text is white; so would not be an issue, if they had a black and white / gray scale printer. but i guess that seems to be the answer to my question - "no" - that it is browser setting based. i can however rely on my old method and create static or dynamic background images and hide them for screen media and only display them for print media. its more work to do, but this would at least semi-accomplish what i was trying to do. actually i already went ahead and done this - so it will work out ok like this - thanks all for the input.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    1
    Rep Power
    0

    Solution to this...


    Hi,

    I know this is a bit of an old post, but I've just ran into the same problem.

    I've got a solution though -

    Create a 1px x 1px image and make that 1px the colour you want (e.g. black).

    Make the image your background, and repeat e.g.

    table
    {
    background : url ('black.gif' ) repeat ;
    color : white ;
    }

    <table>
    <tr><td>Test</td></tr>
    </table>

    The above will create a table with black background and the word test in white in it (as long as you created a black 1px x 1px gif called black.gif in the same folder as the html). This should then also print.

    I've come across a similar problem as I'm designing a form to fill in online based on a real form that uses tables, and each column of the table is coloured in a specific way instead of using lines to separate the columns/rows.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    2
    Rep Power
    0

    Printing Of Background Colors Or Images Is A Printer Configuration Issue


    Note that according to W3C standards, printing of background colors or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colors or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink).

    To enable either for a particular purpose, access your printer preferences.

    (These are not CSS issues.)

IMN logo majestic logo threadwatch logo seochat tools logo