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
Fullscreen bakgrund...
7 svar · 494 visningar · startad av M@rtin
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]
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]
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
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
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]