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

StackOverflow https://stackoverflow.com/questions/22179482

  •  05-06-2023
  •  | 
  •  

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?

Était-ce utile?

La solution

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top