Hintergrundbild skalieren px skalierung verhindern

Computer: Software & Programmierung HTML & CSS
#1

Hallo,
ich hoffe jemand hat hier eine Idee, wie ich das lösen könnte:

Ich habe eine div mit Hintergrundbild. In der div stehen zwei Bilder und ein wechselnder Text. Zwei Dinge habe ich ausprobiert, beide sind nicht zufriedenstellend:

  1. Ich gebe die Größe der div und den Text in px an => FF behält die Größe der Div, aber der Text fällt bei strg & + aus dem Fenster und in das darunterliegende Feld.
  2. Ich gebe alles in em an => Die div wächst schön mit dem Text, aber das Hintergrundbild wird hässlich verdoppelt (unten und rechts, wie bei Kacheln).

Zwei Lösungen kann ich mir vorstellen, weiß aber nicht, wie das css dafür aussehen muss:

  1. Ich verbiete für diesen speziellen Fall, dass die px-Schrift skaliert wird.
  2. Ich bringe es fertig, den Hintergrund ebenfalls zu skalieren.

Hat jemand eine Idee? Ich bin auch für eine Lösung Nummer 3 dankbar! Ich habe alle anderen Schriftgrößen des Projektes etc. in em angegeben. Nur in diesem fest umrissenen Fall möchte ich eigentlich pixelgenaue Darstellung (es handelt sich um eine Art Headbanner). Ich möchte den Text eigentlich auch nicht als Graphik einfügen, weil er eigentlich per Zufall durch javascript eingefügt werden soll.

Vielen Dank für Ideen und Tipps!

Simon

PS: Worin besteht eigentlich der Sinn einer Unterscheidung zwischen em und px, wenn beides skaliert wird? Steh ich auf dem Schlauch?

#2
  1. Ich gebe die Größe der div und den Text in px an

Schlecht, weil
a) der IE das Skalieren der Schrift nicht zulässt und
b) in allen anderen Browsern das Blockelement nicht mit dem Text mitwächst.

FF behält die Größe der Div, aber der Text fällt bei strg & + aus
dem Fenster und in das darunterliegende Feld.

Eben.

  1. Ich gebe alles in em an => Die div wächst schön mit dem
    Text, aber das Hintergrundbild wird hässlich verdoppelt (unten
    und rechts, wie bei Kacheln).

Was heißt „wie“? Hintergrundbilder werden gekachelt, wenn man es ihnen nicht verbietet. Schalte das Kacheln aus oder verwende ein anderes Hintergrundbild.

  1. Ich verbiete für diesen speziellen Fall, dass die
    px-Schrift skaliert wird.

Schriftgrößenänderung verbieten ist Murks und nicht barrierefrei.

  1. Ich bringe es fertig, den Hintergrund ebenfalls zu
    skalieren.

Das ist technisch nicht möglich, zumindest nicht als Hintergrundbild.
Da müsstest Du schon eine Grafik auf eine tiefere z-Ebene legen. Aber normale Grafiken skalieren sieht halt auch hässlich aus. Und wie weit nun die SVG-Unterestützung ist, weiß ich aktuell nicht.

Dritte Lösung: Anderes oder kein Hintergrundbild.

Nur in diesem fest umrissenen Fall
möchte ich eigentlich pixelgenaue Darstellung

Werden das auch die Nutzer wollen?

Ich möchte den Text eigentlich auch
nicht als Graphik einfügen, weil er eigentlich per Zufall
durch javascript eingefügt werden soll.

Text kann man theoretisch auch zufällig als Grafik einfügen, per PHP erzeugt.
Mit einem alt-Attribut versehen kann man den bei abgeschalteten Grafiken erscheinenden Text dann wenigstens skalieren.

Vielen Dank für Ideen und Tipps!

Bitte.

Simon

PS: Worin besteht eigentlich der Sinn einer Unterscheidung
zwischen em und px, wenn beides skaliert wird? Steh ich auf
dem Schlauch?

Es wird ja nicht beides skaliert.
Mit px legt man Elementgrößen in Pixeln fest, bei em legt man die Größen in Abhängigkeit von der aktuellen Schriftgröße fest. Ändert man die Schriftgröße, wachsen Elemente in px nicht mit, Elemente in em schon.
Außerdem ist der IE zu blöd, Schrift in px zu skalieren.

Gruß,
-Efchen