Image für Drucklayout ändern

[Werner I.]

Hallo zusammen,

ich würde gerne im Drucklayout mein Banner in stark verkleinerter Form mit ausgedruckt bekommen.

Ist es überhaupt möglich, dass für das Drucklayout statt z.B. Banner.jpg das print.css auf dann Banner2.jpg zugreifen könnte.

Danke für Tipps

Werner

 

[crash]

Nein. CSS kann am HTML direkt nichts drehen. Es läuft also darauf hinaus, ein eigenes Layout zu erstellen.

 

[_Thor_]

Was hindert dich, es zu probieren?

Mehr als schiefgehen kann es nicht ;)

Ist aber möglich, wenn der Banner als Hintergrundbild eingebunden ist.

 

[Werner I.]

Ich habe es in der print.css versucht über

body  {
  background-color: #fff;
  background-image: url(../images/Banner2.jpg);
}

versucht, aber das scheint so nicht zu klappen. Oder mache ich einen Denkfehler?

 

[Efchen]

Prinzipiell geht das mit dem Hintergrundbild schon. Aber es kann sein, dass im Browser eingestellt ist, dass Hintergrundbilder oder -farben nicht mitgedruckt werden sollen.

 

[_Thor_]

Ok, wieder was gelernt, Hintergrundbilder werden wohl nicht gedruckt.

Du könntest aber das Element (body bietet sich hier nicht an) zu einem list-item machen und dann dein Hintergrundbild als list-style-image angeben.

<h1>test</h1>

h1 {
  display: list-item;
  list-style-image: url('background-image');
  list-style-position: inside;
}

Für ne print.css durchaus vertretbar würde ich sagen.

 

[Werner I.]

ok; da ich ja auf die Browsereinstellung der Besucher keinen Einfluß habe, geht es so wohl nicht.

Dann würde ja noch die Möglichkeit des eigenen Layoutes zu testen sein.

Aber wie kann ich denn ein eigenes Layout über die print.css in das HTML-Dokument integrieren? Die print.css ist ja bereits im Header eingebunden.

 

[Junny]

Ich glaube, crash meinte mit Drucklayout eine neue Seite, die sich hinter einem Link "druckbare Version" befindet.

Ich habe zwei Ansätze:

1. Wenn Dein Banner Text (z.B. die Seitenüberschrift) enthält, gehört er zum Inhalt und verdient ein img mit entsprechendem alt-Attribut. Dann kannst Du zum Drucken die Bildabmessungen per CSS überschreiben und das Bild so skalieren.
2. Wenn Dein Banner rein dekorativer Natur ist oder Du unbedingt ein anderes Bild verwenden möchtest, probier es mal mit content: url("") in Verbindung mit :after oder :before.

Gruß
Junny

 

[Werner I.]

es hat geklappt; ich hab es nach der Methode von Thor gemacht und siehe da...; perfekt.

Danke für Eure Unterstützung.

Werner

 

[Efchen]

Wobei Punkt 1 von Junny eigentlich sinnvoller ist.
Content wird nicht als Hintergrund eingebunden. Und wenn es doch Zierde ist, gibt es keinen notwendigen Grund, es auszudrucken.