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

Beitrag lesen

SELF-Forum

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

Christian Thomas
– Informationen zu den Bewertungsregeln

Guten Abend,

ich möchte gerne ein Overlay erstellen für Inhalte die zu groß werden. Die erste Idee war, die Texte einfach auf 150 Zeichen zu kürzen, was aufgrund von BBCodes aber nicht so gut funktioniert. Eine weitere Idee war, einfach ein Overlay drüber zu legen, wenn die Box 150px Höhe erreicht hat. Leider funktioniert mein Ansatz nicht, da das Hintergrundbild unten ist, selbst wenn es nicht die Höhe erreich hat.

Mein Ansatz:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #outer, #overlay {
            max-height: 200px;
        }

        #outer {
            position: relative;
        }

        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url(overlay.png);
            background-position: bottom;
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
<div id="outer">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
    sit amet.
    <div id="overlay">
    </div>
</div>
</body>
</html>

Ist es so überhaupt möglich oder werde ich auf JavaScript zurückgreifen müssen?

Besten Dank Christian

Beitrag melden
–
Informationen zu den Bewertungsregeln