How to force background-color to print

Discussion in 'CSS' started by ellen yan, Oct 8, 2007.

0
  1. #1
    I have created a HTML page to display bar chart. Each bar is specified using div with a background-color. The chart displays fine in browser but color won't show up when my users print it out.

    I understand browser default configuration can be changed in order to force background color in print, but this is NOT an option for my users since they don't have rights to re-config browser settings.

    What would be a alternative way to force the bar color to be printed?

    Appriciate any suggestions.;)

    Thank you.

    Ellen
     
    ellen yan, Oct 8, 2007 IP
  2. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <link rel="stylesheet" media="print" href="print.css" type="text/css" />

    Try styling the background of the desired element in a css file that has it's media type set to "print"
     
    Arnold9000, Oct 8, 2007 IP
  3. ellen yan

    ellen yan Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thank you so much for replying my question!

    I actually tried the approach you suggested:
    in my HTML page, I have both
    <link rel="stylesheet" media="print" href="print.css" type="text/css" />
    <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
    print.css and screen.css are identical css file with different file name, where div background-color is set as red, but it didn't seem the print.css works, the print out is still having white background.

    Did I do it wrong?

    Thank you again for helping!

    Ellen
     
    ellen yan, Oct 8, 2007 IP
  4. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #4
    It's likely that the browser's print settings are overriding your web pages. After all, most users might not want to waste ink by printing backgrounds on web pages.

    For example, take a look at the Page Setup dialog box in Firefox 2. There's a checkbox for "Print Background" that's unchecked by default. If you check it, your background should print. But you can't force every user to do that.
     
    KatieK, Oct 8, 2007 IP
  5. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Try declaring your print css file second, and use !important at the end of your style sheet declaration to override the user's browser preferences.

    ex. Background: #000 !important;
     
    Arnold9000, Oct 8, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    AFAIK, it's not possible to print the background color or image even if you're using !important.
     
    soulscratch, Oct 8, 2007 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Yeah, I think you're right. The only way to do it is through an active X object or possible Java because it turns out, it's not a function of browser rendering, it's a function of the browser's operations with the printer, which would be completely separate from anything in css or even javascript.
     
    Arnold9000, Oct 9, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hmmm, so Ellen, you'll have to talk to the users' sysadmin then if they can't themselves change the browser/printer settings.
     
    Stomme poes, Oct 9, 2007 IP