Hintergrundbildwiederholung beeinflussen

[Sven Rautenberg]

Moin!

<h1 style="font-size:11px; padding:10px 0px 10px;
background-image:url(balken.jpg)">bild<h1>

wenn ich ein bild mit höhe 31px nehme wird es nochmal darunter angezeigt, d.h meine h1 box ist höher als 31px(leeraum oberhal/unterhalb der buchstaben?).

wie kannich mir jetzt die benötigte höhe(der h1 box) fürs bild ausrechnen?

Um die im Thread angesprochenen Dinge nochmal zusammenzufassen:

Eine Zeile Schrift ist nicht nur so hoch, wie die font-size angibt, sondern wie die line-height angibt. Dementsprechend ist dein H1 nicht 11px (fint-size) + 2* 10px (padding) = 31px hoch, sondern höher.

Die line-height in em oder % anzugeben ist grundsätzlich keine schlechte Idee, da man dadurch einen Faktor relativ zur font-size angibt, der auch bei Vergrößerungen konstant bleibt.

Und drittens: Wenn dir mißfällt, dass sich ein Hintergrundbild sowohl in x- als auch in y-Richtung als Kachel wiederholt, gibt es background-repeat:repeat-x/repeat-y/no-repeat, um die Wiederholung nur in einer oder in gar keiner Richtung zu erlauben. Damit hättest du sehr effektiv die Dopplung der Grafik "unterhalb" unterbunden, und sie würde auch nicht neu auftauchen, wenn dein H1 durch irgendwelche Umstände doch irgendwie größer als 31px wird.

Eine fixe Höhenangabe hielte ich jedenfalls nicht für schlau.

- Sven Rautenberg