[HTML / CSS] Pozycjonowanie tła, CROSS-BROWSERING

0

Sprawa wygląda tak. Jest sobie strona internetowa robiona na DIV'ach, w której całe tło jest praktycznie białe z małym wyjątkiem na dole, gdzie pojawia się trawa powtarzana po osi X. Oczywiście pierwszym optymalnym rozwiązaniem jest kod CSS:

body{
	...
	margin: 0px;
	background-image: url("images/trawa.jpg");
	background-attachment: scroll;
	background-repeat: repeat-x;
	background-position: bottom center;
}

Wszystko wyświetla się prawidłowo na IE, ale Opera i Firefox mają z tym zapisem problem. Polega on an tym, że Opera i FF przyklejają tło do końca ZAWARTOŚCI dokumentu, a nie jak IE do samego jego spodu. Ważne jest, że tło musi się scrollować - żadne fixed... Próbowałem to już wypozycjonowanymi DIVami zrobić, ale też nic nie poszło. Sam kod strony wygląda tak:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;">
<link rel="stylesheet" type="text/css" href="templates/style.css">
<script language="JavaScript" type="text/javascript" src="includes/ajax.js"></script>
</head>
<body>
	<center>

		<div id="gorny_pasek">{$top_bar}</div>
		<div id="search"><a href="./"><img src="templates/images/logo.jpg" alt="" border="0"></a></div>
		<div id="ekran">	
			{$content}
			<br><br><br>
			<div id="stopka">
				<a href="./ranking,telewidzowie.html">Ranking telewidzów</a>&nbsp;|&nbsp;
				<a href="./rejestracja.html">Rejestracja</a>&nbsp;|&nbsp;
				<a href="./zaloguj.html">Logowanie</a>&nbsp;|&nbsp;
				<a href="./konkursy.html">Konkursy</a>&nbsp;|&nbsp;
				<a href="./katalog,dodaj.html">Dodaj film</a>&nbsp;|&nbsp;
				<a href="./reklama.html">Reklama</a>&nbsp;|&nbsp;
				<a href="./o_nas.html">O nas</a>&nbsp;|&nbsp;
				<a href="./kontakt.html">Kontakt</a><br><br>
			</div>
		</div>

	</center>
</body>
</html>

Istotna sprawa, ze względu na to, że strona ma być cross-browserowa....

0

mógłbyś pokazać linka do strony gdzie jest coś takiego ?
nie rozumiem, trawa ma być na dole okna a przy przesuwaniu ma być przesuwana w górę ? bez sensu to imo będzie wyglądać, ale w takim razie powinna mieć pozycję top ustaloną na wysokość okna - wysokość trawy

0

Zapomniało mi się. Tutaj macie obrazki:

user image user image

W przypadku pustej strony, albo o małej treści powinno być tak jak w IE. Jeżeli treści będzie więcej to wciąż będzie to pozostawać na dole całego DOKUMENTU a nie OBSZARU WYŚWIETLANIA okna przeglądarki.

0

obrazek jest w miejscu, gdzie konczy sie element body. musisz ten element rozciagnac, np za pomoca min-height.

0

a no to nie można przypisać tła do elementu html zamiast body po prostu

0

i obrazki powinieneś tak wstawić

user image user image

0

ale html ma podobny rozmiar do body. roznica wynika z marginesow i paddingow.

0

a to sorry, pomyliło mi się
bo coś pamiętam że kiedyś centrowałem strone w pionie to tylko dla body musiałem najpierw ustawić 100% height, to z tego mi sie wydało że html domyślnie ma 100%, zresztą dolny border to border z obiektu html a jest na samym spodzie
ale tak nie jest to sorry za wprowadzanie zamieszania

0 
html
{
	min-height: 100%; /*minimalna wysokosc dziala w ff i operze */ 
	background: transparent url("trawa.gif") repeat-x bottom center scroll;	   
}
@media all and (min-width: 0px) /* hack dla opery */
{
	html {height: 100%;}
}

Działa w IE6, Fx 2.x i Operze.

1 użytkowników online, w tym zalogowanych: 0, gości: 1