CODEWITHSUNDEEP
htmlcss
SivaRajini
SivaRajini

Reputation: 7375

div background color not coming when print preview occurs on the page

I have one div in my page:

<div id="div1>

welcome
</div>

I need to set background color for this div using css. so i used background-color css in our page, it works as expected but when I try to print it, it is not showing respective color.

So, I tried to use media code. It works in chrome browser but I don't know whether it will work in all browsers.

@media print {
        #div1 {
            background-color: #E42314 !important;
            -webkit-print-color-adjust: exact; 

        }
    }
    #div1 {
        background-color: #E42314 !important;
    }

Upvotes: 4

Views: 11090

Answers (2)

Flea
Flea

Reputation: 11284

You just need to add the !important attribute onto the the background-color tag in order for it to show up, you do not need the web-kit tag or even need it wrapped in the @print.

background-color: #f5f5f5 !important;

Upvotes: 4

Abhitalks
Abhitalks

Reputation: 28387

There is this option in browser's print settings where you need to flip the "show background colors and images".

Because this is a browser setting, you won't be able to set this through code.

For example if you are using Chrome, the print options will look like this:

enter image description here

For IE, it will look something like this:

enter image description here

Upvotes: 6

Related Questions