javascriptjqueryhtmlcssprintthis

Browser print, doesn´t show images


I'm trying to print some "chosen" content on my webpage with printThis jQuery plugin. When I press print_btn, no images or <hr> are shown in the print. Why?

HTML

<button id="print_btn"></button>
<div class="elementBricka display" style="page-break-after:always">
    <div class="lkbLoggo"></div>
    <hr>
     ....

CSS

#elementBrickor{
    align-items: center;
}

.elementBricka{
    width: 9.614cm;
    height: 14.404cm;
    border: 1px solid;
    background-color: white;

    float: none;
    margin-left: auto;
    margin-right: auto;
}
.lkbLoggo{
    width: 9.182cm;
    height: 2.721cm;
    margin-top: 0.199cm;
    background-image: url("/img/lkb_logga2.png");
    background-repeat: no-repeat;
    background-position: center;
}

JS

$(document).ready(function () {
    $('#print_btn').click(function () {
        $('.display').printThis({
            debug: true,
            importCSS: true,
            importStyle: true,
            loadCSS: "/Data.css",
            pageTitle: false,
        });
    });
});

UPDATE

I´ll answear my own question.
This has nothing to do with "PrintThis".
It´s a browser "issue".
But it was easy fixed with adding: !important in my Css file where i load the img.


Solution

  • Ok, so there is no way to make "PrintThis" print my images.
    But i found a way in CSS:

    .lkbLoggo{
        width: 9.182cm !important;
        height: 2.721cm !important;
        margin-top: 0.199cm !important;
        background-image: url("/img/lkb_logga2.png") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    

    Just add !importantafter each line and it shows in the print.
    Now.. i´d like a funktion to make a whole class important, instead of adding it to every row.