Fullscreen bakgrund...

7 svar · 494 visningar · startad av M@rtin 30 apr. 2000

M@rtinMedlem sedan dec. 19992 085 inlägg

Frågan30 apr. 2000 09:36#1

Hur gör man i CSS om man vill att bakgrunden ska täcka hela sidan men ändå vara no-repeat? Jag har en bild som bakgrund och den måste täcka hela bakgrunden ungefär så som m an kan göra med bakgrunden på skrivbordet i windows...

//M@rtin

nicclasMedlem sedan feb. 20001 050 inlägg

8 maj 2000 18:45#2

Hejsan,

Är problemet redan löst? (isf hur?) Mitt förslag är att göra ett lager som ligger i bakgrunden och som har bläddrarfönstrets storlek.

Kolla på http://www.nic-sys.se/bg.html där sidan nedan finns.

(Laddar om i ns då bläddrarens fönsterstorlek ändras, men inte i ie...)

[Funkar nog bara i ns4, ie4 och ie5!]

/nicclas @ http://www.nic-sys.se

<html> <head>
<title></title>
<script language="Javascript">

var ie=(document.all)?1:0;
var ns=(document.layers)?1:0;

function init(){
  onresize=reloada;
}
function reloada(){
  window.location.reload();
}

if(ns){
  document.write('<div id="test"><img src="nit.gif" width=');
  document.write(window.pageXOffset+innerWidth);
  document.write(' height=');
  document.write(window.pageYOffset+innerHeight);
  document.write('></div>');
  document.close();
}
if(ie){
  document.write('<div id="test"><img src="nit.gif" width=');
  document.write(document.body.scrollLeft+document.body.offsetWidth);
  document.write(' height=');
  document.write(document.body.scrollTop+document.body.offsetHeight);
  document.write('></div>');
  document.close();
}

</script>
</head>
<body onload="init();">
<div id="test" style="position: absolute; left: 0pt; top: 0px; zIndex: 99;">

Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
<table border=40><tr><td>
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
Här kommer den verkliga sidan....Här kommer den verkliga sidan....
En tabell
</td>
</tr>
</table>
</div>
</body>
</html>

[Redigerat av nicclas den 08 maj 2000]

M@rtinMedlem sedan dec. 19992 085 inlägg

10 maj 2000 13:45#3

Exemplet funkade inte riktigt men nu vet jag iaf hur jag ska göra.

Tack!

//M@rtin

nicclasMedlem sedan feb. 20001 050 inlägg

10 maj 2000 15:06#4

Funkade inte riktigt? Menar du att "top" och "left" marginalerna inte är noll och att bildens storlek är lite för stor? Jag vet, det återstår lite putsning...

/nicclas @ http://www.nic-sys.se

[Redigerat av nicclas den 10 maj 2000]

M@rtinMedlem sedan dec. 19992 085 inlägg

10 maj 2000 17:14#5

Nej jag menar att det blir JavaScript error på rad 25. Det visas inte någon bakgrund heller, men det beror nog på JavaScript felet.

//M@rtin

nicclasMedlem sedan feb. 20001 050 inlägg

10 maj 2000 17:44#6

Konstigt, jag har provat detta i både IE och NS, utan problem! Resultat ser se ut så här http://www.nic-sys.se/snapshot.jpg

/nicclas @ http://www.nic-sys.se

nicclasMedlem sedan feb. 20001 050 inlägg

11 maj 2000 07:06#7

Aaaaahhhh, det funkar ju inte i IE5 i Windows (och inte IE4 heller). När jag skrev att jag provat med IE och NS var det på min SUN burk i NS47.2 och IE4.01 och allt funkar fint.

Javascript måste tydligen testas oerhört väl...
Här kommer i alla fall en lagad version (länken ovan också fixad).

Ledsen för detta...
/nicclas @ http://www.nic-sys.se

<html> <head>
<title></title>
<script language="Javascript">

var ie=(document.all)?1:0;
var ns=(document.layers)?1:0;

function init(){
  onresize=reloada;
}
function reloada(){
  window.location.reload();
}

if(ie){
  document.write('<div id=test><img src=bl.gif name=bild></div>');

document.all.bild.style.width=document.body.offsetWidth+document.body.scrollLeft;
document.all.bild.style.height=document.body.clientHeight+document.body.scrollTop;
}
if(ns){
  document.write('<div id="test"><img src="bl.gif" width=');
  document.write(window.pageXOffset+innerWidth);
  document.write(' height=');
  document.write(window.pageYOffset+innerHeight);
  document.write('></div>');
  document.close();
}
</script>
</head>
<body onload="init();">
<div id="test" style="position: absolute; left: 0pt; top: 0px; zIndex: 99;">

Allt är inte JavaScript som glimmar...<br>
</div>
</body>
</html>

[Redigerat av nicclas den 11 maj 2000]

M@rtinMedlem sedan dec. 19992 085 inlägg

12 maj 2000 20:47#8

Ja nu funkar det fint.
Tack för all hjälp..

//M@rtin