2016-05-25 16 views
4

私はdompdfを使用して、さまざまな会社のブランド紙でブランドにしたい文字を生成しています。これを行うには、CSSを使用して背景イメージを取得しています。下部の画像例を参照してください。私は空白に書きたい内容に合わせて適切な余白を設定します。しかし、私はこのレターヘッドを最初のページだけに表示したいだけです。現在、各ページに繰り返し表示されています。私のCSSは次のように見えます:Dompdf:最初のページにのみ表示する背景イメージを取得する方法

どうすれば背景画像がdompdfの最初のページ出力に表示されるようにすることができますか?

現在のHTMLがでレンダリングされている参照してください:その背景画像ので、あなたがメインのコンテンツのdivと重なるのdivに背景画像としてレターヘッドを入れて、div要素の重なり順を整理するためにz-indexを使用することができますhttp://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015

+0

あなたは '@pageを試してみました:first'を?限り、私はそれがwkhtmltopdfで動作することを思い出すことができます - 私はそれがdompdfで動作するかどうかは分かりません。 – eithed

+0

dompdfを使用して@pageでbackground-imageが動作しないようです。 –

+0

「@page:first」を示唆する私の答えを投稿する前に、これらのコメントが見えなかった! PHPコードをいくつか用意して、カット/ペーストのテストを簡単にすることができますか? – miken32

答えて

2

後ろに表示されます。
この方法では、DOMPDFを使ってPDFに変換すると、最初のページにのみ背景画像が表示されます。
以下のCSSはA4 @ 150dpiで動作します。

ここには how it rendersがあります。

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

私は 'size:A4;'と 'margin-top:0.5cm;'を外して、バックグラウンドがいっぱいになるようにします... – Tanker

関連する問題