html - Baggrunds problemer - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #6952 @ 20.11.10 00:08

Hej,
Jeg forsøger at lave en side som skal bruge 2 baggrunds billeder. Det første baggrundsbillede bliver repeatet på x-aksen, og fylder 875 px i højden, efter den vil jeg så have at den næste "går igang" og fylder resten af siden ud hvis den er længere.. Den skal altså fylde ud på både x og y aksen.
Hvordan får jeg dette løst?

Måden jeg har testet på nu er at have den ene background på <body> og den anden i en div. Men det fungerer desværre ikke rigtigt.
Håber i kan hjælpe.

Indlæg senest redigeret d. 20.11.2010 00:15 af Bruger #6952

3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 20.11.10 09:37

4.283

Kode

<html>
	<head>
		<style>
			html {
				background: #000;
			}
			body {
				position: relative;
				margin: 0px;
			}
			
			#bg {
				position: absolute;
				top: 0px;
				height: 875px;
				background: #a00;
				z-index: 0;
				width: 100%;
			}
			
			#wr {
				position: absolute;
				top: 0px;
				z-index: 10;
				width: 100%;
			}
			
			#pb {
				width: 800px;
				margin: 0 auto;
				height: 1200px;
				background: #fff;
			}
		</style>
	</head>
	<body>
		<div id="bg"></div>
		<div id="wr">
			<div id="pb">test</div>
		</div>
	</body>
</html>

Indlæg senest redigeret d. 20.11.2010 10:29 af Bruger #10216

Bruger #5620 @ 20.11.10 09:42

1.500

Umiddelbart kan du vel have det andet billed som baggrund og det første billed i en fixed div.

Eksempel med fast farve bagrunde, virker både i FF og IE.

Kode

<head>
<style>
#back{
  position:fixed;
  width:100%;
  height:100%;
  max-height:800px;
  background:blue;
  height: expression( document.body.scrollHeight > 875 ? "875px" : "auto" ); 
}

</style>
</head>
<body style="background:red;padding:0px;margin:0px">
<div id="back">d
</div>
<div style="position:absolute;top:0px;">
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
T</br>
</div>
</body>

Bruger #6952 @ 21.11.10 13:36

Tak, i får point.
Dog kan jeg ikke få det til at virke uden at der kommer en scrollbar. Men det er et mindre problem lige pt.

Baggrunds problemer

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler