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?

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top