Avatar billede hkb-x Nybegynder
20. juni 2004 - 13:48 Der er 17 kommentarer og
1 løsning

Variabelt baggrundsbillede

Jeg har store problemer med at få mit baggrundsbillede på min hjemmeside (www.mitch.dk) til at fungere... det har kun den samme størelse som det oprindelige billede men jeg ville gerne have at alle brugere skulle kunne se hele billedet uanset hvilken skærmopløsning og browservindu-størelse de har... jeg har selv forsøgt med en kombination af javascript og php men uden held... så vil MEGET gerne have løst denne opgave... så hvis nogen kender kan lave et script der løser dette så ville det hjælpe abnormt...
Avatar billede roenving Novice
20. juni 2004 - 13:54 #1
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 ...
Avatar billede hkb-x Nybegynder
20. juni 2004 - 13:57 #2
men problemet med det er at det ikke når helt ud til "kanten" af browservinduet...
Avatar billede roenving Novice
20. juni 2004 - 14:05 #3
Hvorfor skulle det ikke det ?-)

-- sørger du ikke for at margin, padding og border på body-elementet er 0px ?-)
Avatar billede hkb-x Nybegynder
20. juni 2004 - 14:06 #4
yes... og så kommer det en afstand på 10px til venstre side og 15px til toppen..
Avatar billede figora Nybegynder
20. juni 2004 - 14:12 #5
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>
Avatar billede hkb-x Nybegynder
20. juni 2004 - 14:19 #6
hmm... nu er billedet er... men den dækker over resten af siden.... :S
Avatar billede roenving Novice
20. juni 2004 - 14:24 #7
<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">
...
Avatar billede hkb-x Nybegynder
20. juni 2004 - 14:29 #8
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.....
Avatar billede roenving Novice
20. juni 2004 - 14:36 #9
<!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>
Avatar billede figora Nybegynder
20. juni 2004 - 15:03 #10
<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>
Avatar billede hkb-x Nybegynder
20. juni 2004 - 15:07 #11
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)
Avatar billede roenving Novice
20. juni 2004 - 15:17 #12
Den tror jeg kun kan løses ved at lave noget javascript, som registrerer scroll og flytter billedet !-)
Avatar billede figora Nybegynder
20. juni 2004 - 15:33 #13
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>
Avatar billede roenving Novice
20. juni 2004 - 16:24 #14
>>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">
Avatar billede figora Nybegynder
20. juni 2004 - 17:59 #15
->roenving
Skriver ikke sådan normalt... kender du nogle site hvor der vises nye kode af html???
Avatar billede roenving Novice
20. juni 2004 - 18:03 #16
Indexdothtml er ret god med standard-oplysninger og browser-kompatibilitet:

http://blooberry.com/indexdot/html/index.html
Avatar billede hkb-x Nybegynder
04. oktober 2005 - 14:28 #17
LUKKET
Avatar billede roenving Novice
08. oktober 2005 - 23:38 #18
Tak for hjælpen ,-(
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester