27573 sujets

CSS et mise en forme, CSS3

Bonjour j'espère que vous allez bien!
J'ai un soucis lorsque j'imprime mon fichier le background-image ne s'affiche plus mais plutôt un background blanc alors que moi je veux que mon css soit intégralement imprimer.
et mon QRcode s'affiche tellement gros qu'il prend la moitié de la page

Merci d'avance voici mon code
 <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href='{{ asset("custom/style.css") }}'>
    <title>Extrait  </title>
</head>

<section id="filigrane" style='background-image: url("{{ asset('image/amoi.png') }}")'>
  
        <div class="container">            
            <form >
                <div id="formulaire2">
                    <h4>REPUBLIQUE </h4>
                    <h2>EXTRAIT</h2>
                    <h5>Du régistre des actes d<span>......</span></h5>
                </div>

                <div id="formulaire1"></div>
                <h4>DISTRICT DE .....</h4>
                <h4>......{{ extrait.hopital.ville |upper }}.....</h4>
                <h4>COMMUNE DE</h4>
                    <img src='{{ asset("image/photo-1.jpg") }}'/><br />
                    <h4>ETAT CIVIL</h4>
                    IVOIRIEN
                    <h4>CENTRE DE</h4>
                    <label for="numero" style="color:#cf0202;"> No ........... </label><br />
                    <label for="ncc">
                    <span> DU........ </span><strong> DU REGISTRE DE NAISSANCE DE </strong>
                    </label><br />
                    <label for="ncc">
                        <strong> ........................ </strong>
                    </label>
                
                    <table>
                        <tr><td><label for="nais"> Le </label></td> <td><label for="nais"> <b>.......... ........./</b> </label></td><td>&emsp;A</td> <td><label for="nais"><b> {{ extrait.heureAccouchement | date("H:i") }}/</b> </label></td></tr>
                           <tr><td><label for="nais"> est né </label></td> <td><label for="nais"><b> {{ extrait.nom |upper}} {{ extrait.prenoms |upper }} /</b> </label></td> &emsp;<td>&emsp;A</td> <td><label for="nais"> <b>{{ extrait.hopital.commune |upper }}/ </b></label></td></tr>
                           <tr><td colspan="2"><label for="nais"> Fils de </label></td> <td colspan="2"> <label for="nais"> </b>{{ extrait.nomPere |upper}}. {{ extrait.prenomsPere |upper}}..../ </b></label></td></tr>
                           <tr><td colspan="2"><label for="nais"> et de </label></td> <td colspan="2"> <label for="nais"><b> ..{{ extrait.nomMere |upper }}........{{ extrait.prenomsMere |upper }}.................../</b> </label></td></tr>
                    </table>
                    <br /><br />
                    <hr />
                    <br />
                    <center>
                        <h3><strong><label for="nais"> MENTIONS (éventuellemnt) </label></strong></h3>
                    </center>
                  <p>
                         Marié le <label for="nais"> .......<strong>Néant</strong>............................................. </label>&emsp;&emsp; à<label for="nais"> .......<strong>Néant</strong>............... </label><br />
                        avec <label for="nais">  ....................<strong>Néant</strong>................................................................................................................................................... </label><br /> </label><br />
                        Mariage dissous par décision de divorce en date du <label for="nais"> .......<strong>Néant</strong>........................................ </label><br />
                         Décédé le<label for="nais">.............. .........<strong>Néant</strong>........................ </label><label for="nais"> à </label> <label for="nais"> ................................<strong>Néant</strong>.................................. </label><br />
                         Certifié le présent extrait conforme aux indications portées au registre 
                    </p>

                    <p style="text-align: right;">Délivré au <span>{{ extrait.dateAccouchement |date }}</span></p>
                <code class="">
                    {{ qrcode | raw }}
                </code>
            </form>
                </div>
</section>

<button onclick="print(document.getElementsByTagName('section'))" class="btn-print">Imprimer</button>

</html>

section {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: 100;
	font-size: 12px;
	/*line-height: 30px;*/
	color: rgb(8, 8, 8);
	background: rgb(241, 240, 240);
	background-repeat: no-repeat;
	
	
  }

  label {
	width: 250px;
	display : inline-block;
}




#formulaire1 {
	float: left;
	margin: 0;
	color: #636360;
	width: 220px;
	padding: 0 10px 0 10px;
	top: auto;
}

#formulaire2 {
	float: right;
	margin: 0;
	color: #636360;
	width: 300px;
	padding: 0 0 0 10px;
	top: auto;
	
}




.container {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}
#filigrane{
	background-image:url('amoi.png');
	background-position: center;
	
	}

.qrcode {
	height: 50px !important;
}

.pixel {
	font-size: 3px;
	width: min-content;
	height: min-content;
	line-height: 0;
}
Modérateur
Et l'eau,

De mémoire (à vérifier), tout ce qui est background (color/image), tu ne peux pas les imprimer. De mémoire, c'est à l'utilisateur de paramétrer ça lors de l'impression. Par contre, pour que tu puisses le faire plus facilement et t'éviter de tout refaire : fait une conversion en pdf Smiley cligne

en python, tu as 2 solutions :
- pdfkit
- WeasyPrint

en php, il y a apparemment une solution:
- html2pdf