Zeige background-image nur wenn, wenn min-height ausgenutzt wird?

[Christian]

Da wirst du um Javascript nicht rumkommen. Das ist auch im Sinne von Separation of Concerns nicht weiter schlimm, schließlich handelt es sich ja um eine Funktion/Verhalten, (if #outer width > 150px doSomething) das auch in Javascript abgebildet gehört.

Allerdings ist das Ganze ein bisschen frickelig umzusetzen, wenn es responsive und performant sein soll. Die Höhe deines Containers ändert sich ja beim resizen:

• Wenn du mehrerer solcher Container auf einer Seite hast solltest du das resize Event Debouncen/Throtteln.
• Weiters kannst du die Funktion, soll sie denn präzise sein, nicht bei document ready aufrufen, da zu diesem Zeitpunkt noch nicht sichergestellt ist, dass alle fonts geladen sind. Entweder window load, oder du schreibst dir ein script, das erkennt, wenn Fonts geladen sind.

Es geht primär darum, dass auf dem mobilen Entgerät 4 Boxen angezeigt werden sollen, Antworten für ein Quiz. Allerdings will ich das gerne Einschränken, sobald man anfangen muss zu scrollen. Meine Idee war, wenn eine bestimmte Höhe erreicht wird, dann soll es gekürzt werden. Leider nutze ich ein LaTeX-Framework sowie BB-Codes, welche etwas schwieriger sind zu kürzen. Leider. Hmm...

Randbemerkung:

• in HTML5 brauchst du kein Attribut "type" mehr. <style></style> reicht.

SublimeText hat mir das generiert. g Aber du hast natürlich Recht! :) Danke

• wenn das Overlay einfarbig (z.B.: Text ausgrauen) ist kannst du auch background-color: rgba(DEINEFARBE); wählen. Das spart dir u.U. einen Request.

Mein Overlay hier ist ein Bild was vom Transparenten zum Weißen übergeht.

• ich würde das Overlay mit einer CSS-Pseudoklasse ::before, oder ::after erstellen, anstatt dafür ein eigenes DIV herzunehmen. Das Overlay fällt für mich unter styling/Präsentation, nicht unter Struktur/Content.

Ja, sehr gute Idee! Ich hatte bisher noch nicht so viel mit before und after gemacht, das ist aber eine sehr gute Idee!