Probleme d'impression d'image en JS

ThibaultJ
Javascript

Bonjour,

C'est encore moi !

J'arrive a imprimer une page en js là n'est pas le probléme !!
J'ai une image de fond et j'aimerais quel s'imprime voici mon code :

<!DOCTYPE html>
<html>
    <head>
        <title>Ma Page</title>
        <link href='https://fonts.googleapis.com/css?family=Lobster|Indie+Flower|Open+Sans' rel='stylesheet' type='text/css'>
        <style>
            body{
                background: url(../img/mon_image.png) no-repeat top left;
                width: 721px;
                height: 939px;
                text-align:center;
                font-family: 'Open Sans', sans-serif;
            }
            .eta{margin-top: 50px;}
            .tit{font-family: 'Lobster', cursive;font-size: 36px;}
            .men{font-family: 'Indie Flower', cursive;}
            .des{font-family: 'Indie Flower', cursive;}
        </style>
    </head>
    <body onload="window.print();">
        <h2 class="eta">%NOM ETA%</h2>
        <h3 class="tit">%TITRE%</h3>
        <p class="men">%MENTION%</p>
        <h1 class="gti">%GROS TITRE%</h1>
        <p class="des">%DES%</p>
    </body>
</html>

Ceci est le code épurer car la partie php est inutile ici.
J'ai déja cherche sur Google mais surment mal) c'est pur ca que je suis là.

Merci d'avance,
TJ_

12 réponses

ThibaultJ
Auteur
Réponse acceptée

Ce que je vais faire c'est generer un document pdf et comme ca mon utilisateur pourat imprimer enregistrer etc !!!

ThibaultJ
Auteur

Volqan

Salut,

Essaie ça. Sous chrome :

Benjamin Derepas

Tu peux aussi passer par les media queries spécifique au print et forcer l'affichager du background. (Il me semble que par défault le body background est à #fff ou transparent, à vérifier) .
Toute fois je te déconseille cette pratique d'afficher les background en impression.

ThibaultJ
Auteur

Merci pour vos réponse mais je pense que si un utilisateur est obliger de faire cette manip, il va se dire : "Bon ok, c'est trop compliqué, je laisse tombé !" J'ai aussi essayez de faire plusierus fichier css (Pas comme dans le code ci-dessus) avec en media print mais ca ne fonctionne pas !
TJ_

Benjamin Derepas

Montres nous ton code pour le média print (il faut utiliser les !importantpour forcer les propriétés )

ThibaultJ
Auteur

Je sais et c'est exactement ça : 

body{
    background: url(../img/mon_image.png) no-repeat top left !important;
    width: 721px;
    height: 939px;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
}
.eta{margin-top: 50px;}
.tit{font-family: 'Lobster', cursive;font-size: 36px;}
.men{font-family: 'Indie Flower', cursive;}
.des{font-family: 'Indie Flower', cursive;}

Voilà mais rien ni fait ca ne veux pas imprimer mon image de fond.
TJ_

Benjamin Derepas

essais en decortiquant la propriete background (image' positon' repeat) en forcant a chaque fois, sait on jamais

ThibaultJ
Auteur

Nope Benjamin Derepas ca ne fonctionne toujours pas !

Benjamin Derepas

Tu peux regarder du coté de la propriété de webkit print color adjust .
Mais comme tu le verra , il n'est pas recommandé de l'utiliser

ThibaultJ
Auteur

Non plus toujours pas !

Benjamin Derepas

Qu'a tu trouver de ton coter ?