Variabelt baggrundsbillede

Man kan ikke skalere en baggrund, så der skal findes andre løsninger, som handler om et element der lægges bagest med størrelse efter skærm-størrelsen, deri et img, som har fuld størrelse ...

men problemet med det er at det ikke når helt ud til "kanten" af browservinduet...

Hvorfor skulle det ikke det ?-)

-- sørger du ikke for at margin, padding og border på body-elementet er 0px ?-)

yes... og så kommer det en afstand på 10px til venstre side og 15px til toppen..

Prøv det her:

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<img border="0" src="billede.jpg" width="100%" height="100%" style="position: absolute">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="position: relative">
  <tr>
    <td width="100%"></td>
  </tr>
</table>

</body>

hmm... nu er billedet er... men den dækker over resten af siden.... :S

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;border:0px;}
#bgimg{height:100%;width:100%;top:0px;left:0px;position:absolute;z-index:-1;}
</style>

...

<body>
<img src="minBaggrund.jpg" id="bgimg">
...

begge besvarelser er lige gode... de skaber bare det problem at min side blir sat til toppen af browservinduet istedet for at være midt i... den der kan fixe dette "sidebroblem" får poingene.....

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;border:0px;}
#bgimg{height:100%;width:100%;top:0px;left:0px;position:absolute;z-index:-1;}
#maincontent{height:100%;width:100%;text-align:center;}
#content{width:760px;margin:0px auto;text-align:left;}
</style>

...
</head>
<body>
<img src="minBaggrund.jpg" id="bgimg">
<div id="maincontent">
<div id="content">

<!-- Hele dit øvrige indhold her ...
  husk at regulere de 760px til din rigtige bredde !-) -->

</div></div>
</body>
</html>

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">

<p><img border="0" src="billede.jpg" width="100%" height="100%" style="position: absolute"></p>
<div align="center">
  <table border="0" width="700" cellspacing="0" cellpadding="0" style="position: relative">
    <tr>
      <td width="100%">også bare put alt dit indhold ind i den her celle...
      </td>
    </tr>
  </table>
</div>

</body>

hmm... der er stadig problemer.... da bagggrundsbilledet ikke scroler med hvis du køre ned af... (hvis du har en skærmopløsning på f. eks. 800 x 600)

Den tror jeg kun kan løses ved at lave noget javascript, som registrerer scroll og flytter billedet !-)

Du bliver da aldrig tilfreds ;)

Men her er mit bedste bud på problemet uden brug af java script:

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0" scroll="no">

<img border="0" src="billede.jpg" width="100%" height="100%" style="position: absolute" align="absmiddle">
<div align="center" style="overflow: auto; width: 100%; height: 100%; position: relative">
  <table border="0" width="700" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%">
        Indholdet her...
      </td>
    </tr>
  </table>
</div>

</body>

>>figora

-- jeg synes det er lidt sjov, at du skriver langt det meste af din kode i html 3.2-stil (html4 er fra 1998 !-), men så har du lige brug for en enkelt kode, som kun kan hentes via css, så kunne du vel lige så godt smide alt ind css-style, f.eks.:

<img src="billede.jpg" style="border:0px;width:100%;height:100%;position: absolute;align:center;vertical-align:middle;">
<div style="align:center;overflow: auto; width: 100%; height: 100%; position: relative">

->roenving
Skriver ikke sådan normalt... kender du nogle site hvor der vises nye kode af html???

Indexdothtml er ret god med standard-oplysninger og browser-kompatibilitet:

http://blooberry.com/indexdot/html/index.html

LUKKET

Tak for hjælpen ,-(