Css, image in background for a pdf file

See more:

CSS

Hi there,

I'm looking for a solution to get an image (background) in the back of a pdf file.

For my project I'm printing a part of a page to a Dymo printer to print cards for visitors. Before I use all of my Dymo cards it would be nice if I can test everything with print to pdf. Till now I have problems with this my print looks like this:

HTML view: http://prntscr.com/kpwmyh
PDF view: http://prntscr.com/kpwn2v

Please advise

What I have tried:

This is my code;

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
    padding: 2px 16px; 
}
.body {
width: 1000px; 
}

@media print {
    body:after {
        content: url(../images/QRCard1.png);
    } 
}

@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}

@media screen and (min-width: 480px) {
    .card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 600px;
    height: 300px;
    background-image: url("../images/QRCard1.png");
}