28173 sujets

CSS et mise en forme, CSS3

[Résolu] Impression des background-image,feuille de style media=print

Bonjour à tous,

J'ai un problème par rapport aux feuilles de style d'impression.
J'arrive parfaitement à modifier mes styles pour adapter la mise en page à l'impression mais je ne parvient pas à insérer des images en background-image (pour le logo par exemple).
D'après ce que j'ai lu, cela viendrait du fait que les navigateurs suppriment automatiquement toutes les propriétés de couleur et d'image des background pour éviter à l'utilistateur d'imprimer une page entière colorée.

Ma question est la suivante :
Comment peut on insérer une image dans une mise en page pour le media print ?

J'ai déja pensé à une astuce de bidouille qui consiste à mettre l'image à imprimer en dur dans le code html avec la propriété display:none; dans la feuille de style "screen", et en display:block; dans la feuille de style "print".

Je sais que ceci n'est pas très propre et alourdis le code mais je vois pas d'autre solution...

Si vous en avez, je suis prenneur.

Merci de votre aide.
A bientot brex74
Modifié par brex74 (09 Mar 2006 - 14:35)
Salut,

C'est l'utilisateur qui choisit d'imprimer les images de fond. Par exemple dans Firefox, il faut cocher "imprimer le fond de page (image et couleur)"
Modifié par Alan (08 Mar 2006 - 12:25)
Je suis daccord avec toi Alan, mais par défaut, les navigateurs n'impriment pas les background et nous savons tous que l'utilisateur ne pense pas à ce genre de problème et ne connais même pas les options de son navigateur !
Biensure ceci n'est pas le cas de tous le monde mais la cible du site que je réalise n'est pas forcement un public expert en web.

Pour l'instant je me résoud à utiliser la bidouille que j'ai exposé dans le sujet mais j'aimerais bien trouver une méthode un peu plus "propre".

Brex74
Bonjour,
Si tu pense que ton image est importante, elle ne doit pas faire partie de la présentation, elle doit donc apparaître comme <img> dans <html>. Elle sera alors imprimée.
Pour ce qui est de ton idée pour "display" cela fonctionne... si le "style de la page" n'est pas annulé chez le client.
Nota : pourquoi mettre le logo en "background-image" puisqu'il fait parti du contenu ?
+ 1.
D'ailleurs je ne vois pas l'utilité de la bidouille... Pourquoi ne pas mettre directement l'image en dur plutôt que de mettre la même image en fond plus en dur avec display: none; ?
Modifié par Alan (08 Mar 2006 - 14:59)
Je le met en background pour alléger le code html en sachant qu'il n'a pas une importance capitale.
De plus si je la met dans le code html ( <img src="image.jpg" alt="" />) je devrais forcement l'imprimer.
Ce qui pose problème c'est que le site a pour couleur dominante le noir, l'image du logo est donc avec un fond noir. Quand je veu imprimer, j'aimerais bien afficher le logo avec fond blanc (respect des chartes), c'est aussi pour ca que je met l'image en background dans la css pour pouvoir modifier l'url de cette image suivant le media d'affichage (screen où print).

C'est un peu complexe à expliquer Smiley confus mais je pense y être arrivé !!

Merci brex74
Si ton site a un fond noir pourquoi ton image n'a pas un fond transparent ?
Ca règlerai ton problème nan ?

Bien que je ne suis pas sur du résultat de la transparence à l'impression...
Oui tu as raison mais le logo doit changer complètement.
En fait la version sur le site est une version spécifique et la version imprimable est le logo standard.

Pour finir, J'ai opté pour la solution de bidouille que j'avais expliqué dans mon premier post.
En tout cas, merci à vous pour votre aide.

A bientôt Jérémy
Salut, j'ai un problème semblable, sauf que c'est pour affiché la couleur de background de sous titre dont je veux qu'ils se démarquent lors de l'impression.
Sujet clos
Aller à