Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Kilkuwarstwowe tło, zależne od wysokości strony
klapaucius
post
Post #1





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

Ostrzeżenie: (0%)
-----


Na swojej stronie muszę stworzyć tło składające się z trzech divów: górny, srodkowy i dolny. Górny i dolny div będą miały tła obrazkowe - o stałej wysokości. Natomiast div środkowy będzie posiadał tło z koloru, którego wysokośc byłaby zależna od wysokości całej strony. Czyli miałby się powiększać wraz z ilością tekstu/treści na stronie.

Tło musi się znajdować w kontenerze - divie o wartości position: absolute (ażeby tło było za wszystkimi innymi wartswami strony).

Oto uproszczony szkielet strony:
Kod
<html>
    <head>
        <style type="text/css">
            .background {
                position: absolute;
                z-index: -10;
                width: 100px;
            }
            .background .top {
                background: red;
                height: 100px;
            }
            .background .center {
                min-height: 100px;
                background: green;
            }
            .background .bottom {
                background: yellow;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="background">
            <div class="top"></div>
            <div class="center"></div>
            <div class="bottom"></div>
        </div>
        <p>
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
        </p>
    </body>
</html>



No i teraz jak zrobić, aby środkowy div .center powiększał się analogicznie do ilości tekstu na stronie?

Ten post edytował klapaucius 27.07.2013, 13:36:13
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 26.09.2025 - 22:14