tsunami
Aug 29, 2019
view2472
view7
0
Goto Top

Css Druck Hintergrundbild untrschidlich für erste Seite

GermanQuestionCSSDevelopment
Hallo zusammen,
ich kämpfe mit dompdf.
Was ich möchte ist ein Hintergrundbild für die erste Seite und ein anderes Hintergrundbild für die folgenden Seiten. Sowas wie body:first geht nicht. Irgendwas mit
if(page_number>1)body {background-image:url("'.$imagePath1.'");  else body {background-image:url("'.$imagePath.'");
Aktuell bekomme ich immer nur ein und dasselbe Hintergrundbild.
<?php
// reference the Dompdf namespace
require_once 'dompdf/autoload.inc.php';  
use Dompdf\Dompdf;
$imagePath="mainimages/ersteseite.png";  
$imagePath1="mainimages/zweiteseite.png";  
$dompdf = new Dompdf();
$domPdfOptions = new \Dompdf\Options();
$domPdfOptions->set("isPhpEnabled", true);  
$html='<html><head><style>@page { margin: 0px; }body {background-image:url("'.$imagePath1.'"); background-position: top left;  
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 300px 100px 10px 100px;
    width:100%;
    height:100%;}
   body:first {background-image:url("'.$imagePath.'"); background-position: top left;  
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 300px 100px 10px 100px;
    width:100%;
    height:100%;}
    div.footer { position: fixed; bottom:8mm;left:12mm; width: 19.2cm;height:8mm;border-top:1px solid black; }</style></head>
    <body><div class="footer">  
<div class="content">  

</div>      
</div><br/><br/><br/><br/><p>Lorem ipsum dolor sit amet consectetuer quam sit tempor nascetur vitae. Sed faucibus Quisque et Donec lorem amet nulla et convallis lorem. Montes non pharetra sodales a vitae in vitae enim pellentesque nonummy. Ridiculus laoreet turpis Nam Integer sed id tellus a faucibus pretium. A et sociis tortor id sem id Aliquam diam In urna. Sociis risus.</p>
<p style="page-break-before: always;"></p>  
<br/><br/><br/><br/>djfja agaad sbsthsbhsthshdhsla nvbibr vgafh vh jbsd vbakl gasbjslk cg
</body></html>';  
$dompdf->loadHtml($html);

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'portrait');  

// Render the HTML as PDF
$dompdf->render();
 $font = $dompdf->getFontMetrics()->get_font("Verdana", "");  
// Print page numbering string at pos (500,18) on page, using $font in size 10
$dompdf->getCanvas()->page_text(528, 798, "Seite {PAGE_NUM} von {PAGE_COUNT}", $font, 10, array(0,0,0));  
// Output the generated PDF to Browser
$dompdf->stream();
?>

Irgendwer eine Idee?
Gruß
tsunami
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 489783

Url: https://administrator.de/contentid/489783

Printed on: April 16, 2024 at 21:04 o'clock

7 Comments
Latest comment
Goto Top
Mitglied: 140913
140913 Aug 29, 2019 updated at 14:47:11 (UTC)
Goto Top
Media Queries

CSS
@media print {
   @page :first {
        background-image:url('Pfad');  
    }
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
https://stackoverflow.com/questions/43593612/print-site-logo-just-on-fir ...
Member: tsunami
tsunami Aug 29, 2019 at 18:22:38 (UTC)
Goto Top
Hi,
vielen Dank für die superschnelle Antwort.
Sowas habe ich versucht. Leider nimmt dompdf die Eigenschaft background-image für page nicht.
Hatte es dann mit body :first probiert.
Und danach normal
   body :first {
        background-image:url('Pfad1');  
    }
  body  {
        background-image:url('Pfad2');  
    }
Dann habe ich nur 1 gleiches Bild auf allen Seiten.
Mitglied: 140913
140913 Aug 29, 2019 updated at 20:45:02 (UTC)
Goto Top
Dompdf: how to get background image to show on first page only
Member: tsunami
tsunami Aug 30, 2019 at 09:17:43 (UTC)
Goto Top
Hi,
das habe ich gefunden. Aber trifft es mein Problem? Ich kann natürlich eine Eigenschaft via first festlegen.
Aber was ist mit den folgenden Seiten?
Einfach first für die erste Seite und ohne first für die folgenden funktioniert nicht.

In dem Artikel wird ein div definiert mit der Größe 100%, die Seite generell auf a4 gesetzt. Und dann einfach für jedes div unterschiedliche Hintergründe definieren? Oder habe ich es falsch verstanden?

Ich meine dass ich das auch schon probiert habe, dann wurde allerdings der Hintergrund abgeschnitten und das div nicht auf 100% gesetzt. Es blieb immer ein Rahmen. Erst mit der oben geposteten Variante habe ich zumindest den Effekt welchen ich haben wollte, nämlich einen randlosen Hintergrund.
mfG
tsunami
Mitglied: 140913
140913 Aug 30, 2019 updated at 13:45:59 (UTC)
Goto Top
Aber was ist mit den folgenden Seiten?
Och nö, CSS Grundlagen :not(:first-child)
https://stackoverflow.com/questions/12289853/notfirst-child-selector/122 ...
Member: tsunami
tsunami Aug 31, 2019 updated at 08:57:09 (UTC)
Goto Top
Guten Morgen,
first und not:fist scheint dompdf nicht um zu setzen.
Habe es mit body, p,page/@page und div versucht. Es kommen leere Seiten raus (ohne Hintergrund).
nach reiflicher Überlegung habe ich mir dann gesagt, warum nicht die erste Seite in einen Container setzen und alle folgenden in einen weiteren.
Die allereerste Seite soll image1 bekommen und die folgenden Seiten image2.
$html='<html><head><style>@page { margin: 0px; }  
   #ersteseite {background-image:url("'.$imagePath.'"); background-position: top left;  
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 300px 100px 10px 100px;
    width:100%;
    height:100%;
    }
    #folgeseiten{
    background-image:url("'.$imagePath1.'"); background-position: top left;  
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 300px 100px 10px 100px;
    width:100%;
    height:100%;
    }
    div.footer { position: fixed; bottom:8mm;left:12mm; width: 19.2cm;height:8mm;border-top:1px solid black; }</style></head>
    <body>
    <div class="footer">        
</div>
<br/><br/><br/><br/>
<div id="ersteseite">Lorem ipsum dolor sit amet consectetuer quam sit tempor nascetur vitae. Sed faucibus Quisque et Donec lorem amet nulla et convallis lorem. Montes non pharetra sodales a vitae in vitae enim pellentesque nonummy. Ridiculus laoreet turpis Nam Integer sed id tellus a faucibus pretium. A et sociis tortor id sem id Aliquam diam In urna. Sociis risus.</div>  
<br/><br/><br/><br/>
<div id="folgeseiten">djfja agaad sbsthsbhsthshdhsla nvbibr vgafh vh jbsd vbakl gasbjslk cg</div>  
</body></html>';

Komischerweise bekomme ich nun 6 Seiten, statt 2:
1 leere Seite
2 image1
3 image1
4 leere Seite
5 image2
6 leere Seite

Und das rendern dauert 10 Sekunden (xampp, ssd)
Member: tsunami
tsunami Sep 09, 2019 at 14:40:58 (UTC)
Goto Top
Also, nun habe ich nochmal alles zurückgesetzt:
Etwas css
@page { 
    size: 21cm 29.7cm; 
    margin:0;     
} 
#poppen1{ 
background: url(mainimages/ersteseite.png);
background-repeat:no-repeat;
page-break-after: always;
color:red;     
}
#poppen2{ 
color:black;
background: url(mainimages/zweiteseite.png);
background-repeat:no-repeat;
padding:2cm;       
margins:0;
}
div.footer { position: fixed; bottom: 6mm;left:0.9cm; width:19.2cm;height:6mm;border-top:1px solid black; }

Sie Seite selber:
<?php
require_once("./dompdf/dompdf_config.inc.php");  
$html="<!DOCTYPE html><html><head><title></title>";  
include("./maincss/xyzcss.php");  
$html=$html.$css_print.'</head><body>  

<div id="poppen1">  
gggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggg ggggggggggggggggggg ggggggggg';  
$html.='</div><div style="page-break-before: always;"></div><div id="poppen2">  
Lorem ipsum dolor sit amet consectetuer ut interdum at Nunc aliquet. Diam Nam parturient amet risus mattis dapibus tincidunt sit eu tincidunt. Aenean ac quis quis consectetuer Nullam nunc ut turpis auctor Curabitur. Feugiat justo orci consectetuer ligula Nam et ipsum sociis cursus ac. Magna cursus dictum at Vestibulum nunc.
Justo orci Vivamus sem ac lobortis quam molestie tincidunt Integer ac. Platea enim Vestibulum et nunc nunc Nam tristique tincidunt tincidunt Donec. Turpis Lorem dui et Curabitur porttitor odio id leo sodales Quisque. Curabitur dictumst ipsum nunc malesuada condimentum eleifend massa Vestibulum Vestibulum semper. A urna faucibus malesuada adipiscing sed elit habitant leo at urna. Rhoncus Suspendisse aliquet amet Sed dui habitant leo aliquet Nam.Facilisi nunc odio orci In ligula leo purus In Nunc Curabitur. Risus nulla Integer odio urna ligula vitae hendrerit id tempus porttitor. Integer Maecenas tristique Phasellus et congue euismod cursus laoreet tempor justo. Nulla in ligula leo eros Suspendisse suscipit justo vestibulum porttitor Sed. Curabitur id elit Vestibulum auctor sagittis Donec elit Duis ut Vestibulum. Vel nibh sed leo dolor Aliquam ac rhoncus et consequat In. Nam dis Quisque.
psum sagittis diam Morbi semper nibh tempus nulla orci sapien lacus. Scelerisque Donec interdum fermentum tristique nec commodo ipsum feugiat Phasellus congue. Felis ac pellentesque metus consequat Sed id sapien nec amet velit. Et convallis eget facilisi diam volutpat eget dui sociis scelerisque tellus. Non convallis et Morbi elit at eget fames Quisque Aliquam molestie. Lacinia laoreet ac sem eget Donec.sectetuer Nullam nunc ut turpis auctor Curabitur. Feugiat justo orci consectetuer ligula Nam et ipsum sociis cursus ac. Magna cursus dictum at Vestibulum nunc.
Justo orci Vivamus sem ac lobortis quam molestie tincidunt Integer ac. Platea enim Vestibulum et nunc nunc Nam tristique tincidunt tincidunt Donec. Turpis Lorem dui et Curabitur porttitor odio id leo sodales Quisque. Curabitur dictumst ipsum nunc malesuada condimentum eleifend massa Vestibulum Vestibulum semper. A urna faucibus malesuada adipiscing sed elit habitant leo at urna. Rhoncus Suspendisse aliquet amet Sed dui habitant leo aliquet Nam.Facilisi nunc odio orci In ligula leo purus In Nunc Curabitur. Risus nulla Integer odio urna ligula vitae hendrerit id tempus porttitor. Integer Maecenas tristique Phasellus et congue euismod cursus laoreet tempor justo. Nulla in ligula leo eros Suspendisse suscipit justo vestibulum porttitor Sed. Curabitur id elit Vestibulum auctor sagittis Donec elit Duis ut Vestibulum. Vel nibh sed leo dolor Aliquam ac rhoncus et consequat In. Nam dis Quisque.
psum sagittis diam Morbi semper nibh tempus nulla orci sapien lacus. Scelerisque Donec interdum fermentum tristique nec commodo ipsum feugiat Phasellus congue. Felis ac pellentesque metus consequat Sed id sapien nec amet velit. Et convallis eget facilisi diam volutpat eget dui sociis scelerisque tellus. Non convallis et Morbi elit at eget fames Quisque Aliquam molestie. Lacinia laoreet ac sem eget Donec.sectetuer Nullam nunc ut turpis auctor Curabitur. Feugiat justo orci consectetuer ligula Nam et ipsum sociis cursus ac. Magna cursus dictum at Vestibulum nunc.
Justo orci Vivamus sem ac lobortis quam molestie tincidunt Integer ac. Platea enim Vestibulum et nunc nunc Nam tristique tincidunt tincidunt Donec. Turpis Lorem dui et Curabitur porttitor odio id leo sodales Quisque. Curabitur dictumst ipsum nunc malesuada condimentum eleifend massa Vestibulum Vestibulum semper. A urna faucibus malesuada adipiscing sed elit habitant leo at urna. Rhoncus Suspendisse aliquet amet Sed dui habitant leo aliquet Nam.Facilisi nunc odio orci In ligula leo purus In Nunc Curabitur. Risus nulla Integer odio urna ligula vitae hendrerit id tempus porttitor. Integer Maecenas tristique Phasellus et congue euismod cursus laoreet tempor justo. Nulla in ligula leo eros Suspendisse suscipit justo vestibulum porttitor Sed. Curabitur id elit Vestibulum auctor sagittis Donec elit Duis ut Vestibulum. Vel nibh sed leo dolor Aliquam ac rhoncus et consequat In. Nam dis Quisque.
psum sagittis diam Morbi semper nibh tempus nulla orci sapien lacus. Scelerisque Donec interdum fermentum tristique nec commodo ipsum feugiat Phasellus congue. Felis ac pellentesque metus consequat Sed id sapien nec amet velit. Et convallis eget facilisi diam volutpat eget dui sociis scelerisque tellus. Non convallis et Morbi elit at eget fames Quisque Aliquam molestie. Lacinia laoreet ac sem eget Donec.sectetuer Nullam nunc ut turpis auctor Curabitur. Feugiat justo orci consectetuer ligula Nam et ipsum sociis cursus ac. Magna cursus dictum at Vestibulum nunc.
Justo orci Vivamus sem ac lobortis quam molestie tincidunt Integer ac. Platea enim Vestibulum et nunc nunc Nam tristique tincidunt tincidunt Donec. Turpis Lorem dui et Curabitur porttitor odio id leo sodales Quisque. Curabitur dictumst ipsum nunc malesuada condimentum eleifend massa Vestibulum Vestibulum semper. A urna faucibus malesuada adipiscing sed elit habitant leo at urna. Rhoncus Suspendisse aliquet amet Sed dui habitant leo aliquet Nam.Facilisi nunc odio orci In ligula leo purus In Nunc Curabitur. Risus nulla Integer odio urna ligula vitae hendrerit id tempus porttitor. Integer Maecenas tristique Phasellus et congue euismod cursus laoreet tempor justo. Nulla in ligula leo eros Suspendisse suscipit justo vestibulum porttitor Sed. Curabitur id elit Vestibulum auctor sagittis Donec elit Duis ut Vestibulum. Vel nibh sed leo dolor Aliquam ac rhoncus et consequat In. Nam dis Quisque.
psum sagittis diam Morbi semper nibh tempus nulla orci sapien lacus. Scelerisque Donec interdum fermentum tristique nec commodo ipsum feugiat Phasellus congue. Felis ac pellentesque metus consequat Sed id sapien nec amet velit. Et convallis eget facilisi diam volutpat eget dui sociis scelerisque tellus. Non convallis et Morbi elit at eget fames Quisque Aliquam molestie. Lacinia laoreet ac sem eget Donec.</div>';  
$html.='</body></html>';  
$dompdf=new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
@$dompdf->stream($docname);
// echo$html;
?>

Die Grafik habe ich spaßeshalber kleiner gemacht. Der normale <img-Tag geht. Aber so bleibt der untere Streifen abgeschnitten. Was kann das sein? Background-size:cover und background-size:100% bringt nichts. Ich bin mit meinem Latein am Ende...
zweiteseite
GermanQuestionCSSDevelopment
Hotly discussed
DaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment