I make the layout of the site. The designer drew a white logo (in the dark header of the site) in png. Some time after sending the project, it was necessary, without changing the html, to make a decent page for printing. Through @media print white logo on white paper is of course not visible. Began to try to insert a dark logo through the background-image with different hacks:
@media print{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; /* Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ width: 282px; height: 170px; background-image: url(pic.png) !important; background-repeat: no-repeat; z-index: 99; } Everything is displayed well in firefox, but the behavior in chrome has become unpredictable. Sometimes chrome tkai displays the logo on the preview, but more often not. Has anyone encountered this behavior? So I could not solve the problem by means of css. Can anyone tell me? In an extreme case, tell me how to correctly insert a picture for printing through JS. Thank.
[Update] There is such a block of caps:
<header class="main-header"> <div class="container"> <h1 class="hidden">title</h1> <div class="main-header__logo"> <picture> <source srcset="img/main-header__logo--d.png" media="(min-width: 1170px)"> <img src="img/main-header__logo--m.png" alt="Логотип"> </picture> </div> <div class="main-header__phone">000 000 000</div> <div class="main-header__social"> <a href="#" class="social-but social-but--fb">fb</a> <a href="#" class="social-but social-but--vk">vk</a> </div> <div class="main-header__request"> <button class="but">Оставить заявку</button> </div> <nav class="main-header__main-menu"> <div class="main-menu"> <div class="main-menu__cake main-menu--cake"></div> <ul class="main-menu__list hidden"> <li><a href="">О компании</a></li> <li class="main-menu--active"><a href="">Каталог</a></li> <li><a href="">Сотрудничество</a></li> <li><a href="">Вакансии</a></li> <li><a href="">Контакты</a></li> </ul> </div> </nav> </div> </header> nav and all main-header__logo (except main-header__logo and main-header__phone ) have been disabled using @media print{display: none} . img in main-header__logo also disabled via display:none . Further main-header__logo indicated the css-code from the first part of my question in the main-header__logo block (I inserted a black logo in the background) and indicated the @media print alignment and color for the main-header__phone .
I also tried to hide completely the container and insert the block with the logo through before :
.main-header { position: relative; height: 244px; background: @gray url(../img/header__bg.jpg) 0 0 no-repeat; background-size: cover; @media @tablet-size { background: @gray url(../img/header__bg-desktop.jpg) 0 0 no-repeat; height: 190px; } @media @desktop-size { height: 323px; background: @gray url(../img/header__bg-desktop.jpg) 0 0 no-repeat; } box-shadow: inset 0px 141px 300px -48px rgba(0, 0, 0, 0.75); @media print { box-shadow: none !important; background: none !important; background-size: auto; &::before { position: absolute; left:0; top:0; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; /* Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ width: 282px; height: 170px; background-image: url(../img/main-header__logo--print.png) !important; background-repeat: no-repeat; z-index: 99; content: ""; } } } .main-header > .container{ @media print{ display: none; } } Strange behavior in Chrome remains. When testing, the logo is sometimes shown, but more often not.
