2016-05-25 2 views
4

Ich benutze dompdf, um Buchstaben zu generieren, die ich mit verschiedenen Markenpapiermarken brandmarken möchte. Dazu erhalte ich ein Hintergrundbild über CSS. Siehe Beispielbild unten. Ich setze dann passende Ränder, um den Inhalt anzupassen, den ich in den Leerraum schreiben möchte. Ich möchte jedoch, dass dieser Briefkopf nur auf der ersten Seite angezeigt wird. Derzeit wiederholt es sich auf jeder Seite. Meine CSS wie folgt aussieht:Dompdf: wie bekomme ich Hintergrundbilder, um nur auf der ersten Seite zu zeigen

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>{$pdf.title}</title> 
<style type="text/css"> 
    @page { 
    size: A4; 
    margin:0; 
    padding: 0; 
    } 
    body { 
    padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm; 
    font-size: 7pt; 
    font-family: helvetica !important; 
    background-image: url('{$base_url}pd-direct.png'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    font-size: 10pt; 
    } 
    #postal-address { 
     margin: 0cm; 
     margin-left: {$branding.address_offset_left}cm; 
     margin-top: {$branding.address_offset_top}cm; 
     margin-bottom: {$branding.address_offset_bottom}cm; 
     font-size: 10pt; 
    } 
    #date { 
    font-weight: bold; 
    } 
</style> 
    </head> 

    <body> 

    <div id="page-body"> 

     <div id="content"> 

     {if $pdf.postal_address} 
     <div id="postal-address"> 
      {$pdf.postal_address|nl2br} 
     </div> 
     {/if} 

     {$pdf.main_body} 

     </div> 

    </div> 
    </body> 
</html> 

Wie kann ich das ändern, so dass das Hintergrundbild nur auf der ersten Seite Ausgabe von dompdf angezeigt wird? http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015

+0

Haben Sie versucht, '@ page: first'? Soweit ich mich erinnern kann, funktioniert es mit wkhtmltopdf - ich bin nicht sicher, ob es mit dompdf funktioniert. – eithed

+0

background-image scheint nicht auf @page mit dompdf zu funktionieren. –

+0

Ich habe diese Kommentare nicht gesehen, bevor ich meine Antwort gepostet habe, in der vorgeschlagen wurde, @page: first'! Können Sie etwas PHP-Code bereitstellen, damit die Leute den Cut/Paste-Test leichter durchführen können? – miken32

Antwort

2

Sie den Briefkopf als Hintergrundbild in einem div setzen können, die den Hauptinhalt div überlappt und verwenden z-index die Stapelreihenfolge der divs zu organisieren, so dass Hintergrundbild:

Siehe aktuelle html bei gerendert wird Wille erscheint auf der Rückseite.
Auf diese Weise wird das Hintergrundbild nur auf der ersten Seite angezeigt, wenn Sie es mithilfe von DOMPDF in PDF konvertieren.
Das folgende CSS funktioniert für A4 @ 150dpi.

Hier ist how it renders mit Beispiel Ihr zur Verfügung gestellt.

CSS

@page { 
    size: A4; 
    margin-top:0.5cm; 
    margin-bottom:0; 
    margin-left:0; 
    margin-right:0; 
    padding: 0; 
    } 
    body { 
    font-family: helvetica !important; 
    font-size: 10pt; 
    position: relative; 
    } 
    #overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url('http://www.showhousesoftware.com/pd-direct.png'); 
    background-position: center top; 
    background-repeat: no-repeat; 
    z-index: -1; 
} 
    #content{ 
    padding: 3.5cm 0.50cm 5.00cm 0.50cm; 
    } 
    #postal-address { 
     margin: 0cm; 
     margin-left: 1.50cm; 
     margin-top: 0.00cm; 
     margin-bottom: 1.00cm; 
     font-size: 10pt; 
    } 
    #date { 
    font-weight: bold; 
    } 

HTML

<body> 
<div id="page-body"> 
<div id="overlay"> 
</div> 
<div id="content"> 
...... 

</div> 
</div> 
</body> 
+0

Ich nehme die 'Größe: A4;' und die 'Rand-Spitze: 0,5cm;' auf diese Weise wird der Hintergrund voll sein ... – Tanker

Verwandte Themen