turn on printing background colors and images with css? (renamed from css print pseudo element and element background print)

Question

I need to make a css animation with element and its pseudo :before CSS and at the same time keep the ablility to print the last state:

.pump:before {
        content:"";
        width:100px;
        border: 1px solid #0ca3da;
        top:-4px;
        left:-1px;
        height:100px;
        display:inline-block;
        position:relative;
    }
    .pump {
        height:10px;
        width:50%;
        top:4px;
        background:#0ca3da;
        display:inline-block;
        position:relative;
        animation: pump 1s;

    } 
    @keyframes pump {0%   {width: 0px;}}
    @-webkit-keyframes pump {0%   {width: 0px;}}
    .wrap {
        display: inline-block;
        width : 95px;
    }

#pmp {width:34px;}

on the screen I need to animate it like here: http://jsfiddle.net/iskren/L3khm/6/ and on the print media I need to show last state of the move only

In Google Chrome I use ctrl+p and my Options for Printing "Background colors and images" was turned off. So question now is there any way to set this option to on when chosen to print

Are you talking about printing a physical copy of the page from a printer? — dezman, Feb 27 '14 at 22:48
in Chrome I send ctrl+p command and on the screen there the background of the element with "pump" class is not visible — Iskren Stanislavov, Feb 27 '14 at 23:25
@GhostGambler i have not tried to use javascript and two div tags. I also try using `display:inline-bolck !important;` in here http://jsfiddle.net/iskren/L3khm/14/ — Iskren Stanislavov, Feb 28 '14 at 09:07

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

The answer turned out to be in this thread for webkit user:

https://stackoverflow.com/a/14784681/3345926

using:

body{
  -webkit-print-color-adjust:exact;
}

edited May 23 '17 at 12:13

Community

1
1

answered Feb 28 '14 at 09:40

Iskren Stanislavov

51
5

turn on printing background colors and images with css? (renamed from css print pseudo element and element background print)

1 Answers1