Why does the media attribute in the link element does not work for the print value?

Question

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML</title>
        <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
        <link rel="stylesheet" type="text/css" href="print.css" media="print">
    </head>
    <body>
        <!-- Add your content here-->
    </body>
</html>

Here is screen.css:

body {
    background-color: cyan;
}

Here is print.css:

body {
    background-color: red;
}

The screen looks good, the way it should, with the cyan background color. However, the print preview shows a white background color. Does anybody know why this is happening?

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

0

You need to select an option 'Apply background color and images' in print settings of your browser.

Following link might be of help.css media type print using background-color in chrome

enter image description here

edited May 23 '17 at 12:20

Community

1
1

answered Mar 04 '14 at 18:05

AbhinavRanjan

1,638
17
21

Why does the media attribute in the link element does not work for the print value?

1 Answers1