Forum PHP.pl > [CSS]Jak zrobić tło strony z obrazka rozciągnietego na 100%

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Jak zrobić tło strony z obrazka rozciągnietego na 100%

AboutMe

3.05.2010, 13:06:21

Witam,

Chciałbym ustawić teksturę rozciągniętą na cały ekran jako tło strony. Jak to zrobić?

Dodałem DIVa na całą stronę z position: absolute a w środku <img src="bg.png" width="100%" height="100%" /> ale niestety cała strona mi się rozlatuje.

wookieb

3.05.2010, 13:09:28

Poczytaj o z-index, resztę strony umieść w divie i o największym z-index.
Poza tym odradzam skalowanie obrazka bo to brzydko wygląda. A po co chcesz skalować i co to za obrazek?

st4chu

3.05.2010, 13:17:25

Cytat(AboutMe @ 3.05.2010, 14:06:21 )

Witam,

Chciałbym dać teksturę rozciągniętą na cały ekran jako tło strony. Jak to zrobić?

Dodałem DIVa na całą stronę z position: absolute a w środku <img src="bg.png" width="100%" height="100%" /> ale niestety najpierw widzę tło a niżej treść strony z białym tłem.

[HTML] pobierz, plaintext 
<style type="text/css">
body {
	background-image: url(bg.png);
	background-repeat: repeat;
}
</style>
[HTML] pobierz, plaintext

to jest przykład dla rozciągnięcia tła na całą stronę. Odradzam skalowania tła na całą stronę, bo widać piksele.

AboutMe

3.05.2010, 13:19:34

Ot np. taki http://www.istockphoto.com/stock-photo-708...-background.php
repeat to kompletnie odpada

Pawel_W

3.05.2010, 13:23:17

http://www.kurshtml.boo.pl/przyklady/css/tlo_rozmiary.html

chyba piąty raz widzę taki temat...

krzysztof_kf

3.05.2010, 15:10:35

[CSS] pobierz, plaintext 
<body style="margin:0px; padding:0px;">
<img src="test.jpg" style="width:100%; height:100%;" alt="moj obrazek"/ >
<div style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
O to chodziło ?! (=
</div>
[CSS] pobierz, plaintext

Poradnik

8.11.2012, 20:33:40

http://www.youtube.com/watch?v=rKRvKJ_s_Bk
Tu masz wszystko wyjaśnione

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.