I do not understand why the print version does not work correctly?

Question

css

https://jsfiddle.net/1hgj8sd6/2/
Actually, everything is clearly visible.
Two logos. One for the plain version, one for print.
It could be done by changing the background-image, but it doesn't work either.
I can't figure out what's wrong.
Hiding are hiding, but shouldn't they be shown?

Answer 1

In short, the situation is strange)
I have printing of background images enabled, the logo (.logo-in) is printed normally.
But if you try to change the background image through media print or hide it, it is not shown.
The solution for my situation is this.
https://jsfiddle.net/1hgj8sd6/4/
In principle, it suits, but somehow it does not work correctly.
BUT the main thing works)

Answer 2

ask for

header a.logo-main,
header a.logo-in,
header a.logo-in-print {
    -webkit-print-color-adjust:  exact;
}