Forum PHP.pl > Jak rozciągnąć tło elementu na całą stronę?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Jak rozciągnąć tło elementu na całą stronę?

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

WebCM

4.12.2010, 15:04:43

[HTML] pobierz, plaintext 
<div class="ograniczony">zawartość</div>
[HTML] pobierz, plaintext

[CSS] pobierz, plaintext 
.ograniczony {
  max-width: 500px;
  background-image: url(tlo.png)
}
[CSS] pobierz, plaintext

Tło elementu ma rozciągać się na całą szerokość okna przeglądarki, zaś szerokość obiektów wewnątrz nie może przekraczać ustalonej wartości, np. 1366px. Czy da się to zrobić tylko w 1 znaczniku, czy trzeba stosować więcej?

[HTML] pobierz, plaintext 
<div class="rozciagacz">
  <div class="ogranicznik">
	obiekty wewnętrzne
  </div>
</div>
[HTML] pobierz, plaintext

Tak najłatwiej, ale po co wstawiać nadmiarowe elementy?

Dokładniej chodzi o to, aby:
* szerokość całej strony była maksymalnie 1366px
* tło nagłówka oraz stopki rozciągało się do całej szerokości ekranu - 100% (nawet 2000px)

Zatem operujemy na <html>, <body> i obiektach potomnych. Da się to uzyskać w ramach CSS 3 albo innych sztuczek?

vokiel

4.12.2010, 18:21:29

Jeśli tło ma się rozciągać na całą szerokość przeglądarki to dodaj je do body.

Jeśli natomiast nagłówek i stopka mają mieć swoje tła na całą szerokość to musisz je i tak umieścić w oddzielnych blokach. Dla nagłówka możesz jeszcze skorzystać z tła w body, ale dla stopki trzeba robić oddzielny blok.

[HTML] pobierz, plaintext 
<body>
    <div id="wrapper">
        <div id="content"></div>
    </div>
</body>
 
<style type="text/css">
body {
    background: url("tlo_header.jp") repeat-x top left;
}
#wrapper{
    background: url("tlo_footer.jpg") repeat-x bottom left;
    width: 100%;
}
#content {
    max-width: 1366px;
    margin: 0 auto;
}
</style>
[HTML] pobierz, plaintext

WebCM

4.12.2010, 21:16:13

Ostatecznie wsadzę tło nagłówka do <body> lub <html>, a stopkę wpiszę w inny <div> ale tu pojawia się kolejny problem - niektóre hostingi wstawiają reklamy na górze, więc cała zawartość przesunie się niżej, a tło zostanie pod reklamą

Nie da się tego zrobić w CSS 3, by nie wstawiać nadmiarowych znaczników? Być może istnieje jakaś sztuczka

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.