Avatar billede keysersoze Ekspert
16. november 2008 - 20:22 Der er 21 kommentarer og
1 løsning

to baggrundsbilleder i bunden

Jeg forsøger at få 2 billeder til at ligge i bunden af min side - og det forvolder en del problemer.

Først og fremmest sætter jeg height på både body og html til 100% - og dernæst sætter jeg et baggrundsbillede i body. Gør jeg det og ikke andet bliver mit billede sat helt i bunden af siden - altså præcis som forventet.

Nu vil jeg have baggrundsbillede nummer 2 på og det gør jeg i html - dette billede bliver, også præcist som forventet, placeret absolut i bunden af siden. Det "interessante" er nu, at baggrundsbilledet fra body ikke længere er placeret i bunden af siden men derimod i bunden af skærmen.

Et eks;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <style type="text/css">
      html
      {
        background-image: url('bill2.gif');
        background-repeat: repeat-x;
        background-position: bottom center;
        height: 100%;
      }
     
      body
      {
        background-image: url('bill1.jpg');
        background-repeat: no-repeat;
        background-position: bottom center;
        margin: 0px;
        height: 100%;
      }
    </style>
</head>
<body>
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
</body>
</html>

Hvad er lige grunden til at et baggrundsbillede på body får en anden betydning når der også er baggrundsbillede på html - og ikke mindst, hvordan løser jeg det?
Avatar billede olebole Juniormester
16. november 2008 - 20:33 #1
<ole>

Prøv lige med et link, så jeg slipper for at lave billeder for at teste  ;o)

/mvh
</bole>
Avatar billede w13 Novice
16. november 2008 - 20:46 #2
Ja, det virker ret spøjst. Ved en meget hurtig test, ser det ud til at være forårsaget af background-repeat..
Avatar billede keysersoze Ekspert
16. november 2008 - 20:49 #3
Avatar billede olebole Juniormester
16. november 2008 - 20:50 #4
Hvis du lægger en baggrundsfarve ind, sker det samme:

    <style type="text/css">
      html
      {
        background-color: #ff0;
        height: 100%;
      }
     
      body
      {
        margin: 0px;
        background-color: #f00;
        height: 100%;
      }
    </style>

<div style="width:30px;height:2000px;background:#0f0;">Indhold</div>

Body-elementet bliver kun farvet i det område, som ved side-load ligger inden for view-porten. Det sker både i IE, FF og Opera
Avatar billede olebole Juniormester
16. november 2008 - 21:11 #5
Hvis du til gengæld sætter én af højderne til 2000px, vil den røde baggrundsfarve fylde hele dokumentets højde
Avatar billede keysersoze Ekspert
16. november 2008 - 21:31 #6
Er der nogen nærmere forklaring på hvorfor dette sker? og er der nogle idéer til hvordan løser jeg min udfordring - ikke at det skal ske vha 2 baggrundsbilleder, men måske har jeg bare overset en anden måde at sætte det op på.
Avatar billede zips Juniormester
17. november 2008 - 00:06 #7
Hvis du ikke sætte nogen height på html og body kommer billedere til at ligge i bunden af alle dine 1 taller.

Jeg har set at nogen bruger html {height:101%} til at sætte en fast scrollbar i FF, så html må tolkes af nogen browser som skærmhøjden, jeg kan ikke komme med en forklaring, men har prøvet dette.

IE6 med html height 100% = sætter bill2.gif og bill1.jpg i bunden af siden.
IE6 med html og body height 100% = sætter bill2.gif og bill1.jpg i bunden af siden.
IE6 med html og body helt uden height = sætter bill2.gif og bill1.jpg i bunden af siden.

IE7 med html height 100% = sætter bill2.gif og bill1.jpg i bunden af siden.
IE7 med html og body height 100% = sætter bill2.gif i bunden af siden og bill1.jpg i bunden af skærmen.
IE7 med html og body helt uden height = sætter bill2.gif og bill1.jpg i bunden af siden.

Opera med html height 100% = sætter bill2.gif i bunden af skærmen og bill1.jpg i bunden af siden.
Opera med html og body height 100% = sætter bill2.gif og bill1.jpg i bunden af skærmen.
Opera med html og body helt uden height = sætter bill2.gif og bill1.jpg i bunden af siden.

Safari med html height 100% = sætter bill2.gif og bill1.jpg i bunden af siden.
Safari med html og body height 100% = sætter bill2.gif i bunden af siden og bill1.jpg i bunden af skærmen.
Safari med html og body helt uden height = sætter bill2.gif og bill1.jpg i bunden af siden.

Håber en kan se noget ud af dette :)
Avatar billede olebole Juniormester
17. november 2008 - 13:07 #8
Forklaringen er såmænd ganske ligetil  =)

Sætter du en højde på dokument elementet (som implementeres med html-tagget) på 100%, bliver det ligeså højt som viewporten. Sætter du derefter body elementets højde til 100%, får dette samme højde. Denne højde er, hvad CSS bruger til at beregne, hvormeget der skal farves (hvis vi bruger baggrundsfarver i stedet for billeder - hvilket er lidt lettere til undersøgelse af fænomenet).

Altså farves body'en i viewportens højde - også selvom noget indhold 'bryder denne højde'. Du har explicit fortalt browseren, at det område, der skal indfarves, har en højde, der er lig viewportens (100%) - og browseren tager dig på ordet!  ;o)

Et andet eksempel:

<div style="height:100px">
    <div style="height:100%;background:red">Blabla</div>
</div>
<hr>
<div style="height:100px">
    <div style="height:100%;background:red"><div style="height:1000px;width:20px;background:blue">Blabla</div></div>
</div>

En løsning er at sætte det blå div's (eller dokument elementet i din situation) højde med 'min-height: 100%' - hvilket dog ikke virker i IE6
Avatar billede olebole Juniormester
17. november 2008 - 13:09 #9
VRØVL!  :o|
    "En løsning er at sætte det RØDE div's højde med 'min-height: 100%'"
Avatar billede keysersoze Ekspert
17. november 2008 - 13:44 #10
olebole >> det forklarer dog stadig ikke hvorfor body-baggrunden opfører sig forskelligt alt efter om html har en baggrund eller ej som jeg ser det i hvert fald? Hvis man tager mit link og fjerner alt pånær height i html-stylen positioneres body-baggrunden jo korrekt (korrekt i forhold til ønsket).

zips >> det er korrekt, at der sker det hvis height ikke sætte, men så forestil dig situationen hvor der kun er ét 1-tal, så skulle begge dele gerne placeres i bunden af skærmen da bunden af siden så ligger betydelig højere oppe en skærm-bunden og det vil give et uheldigt resultat. Ellers ser dine betragtninger ud til at passe med de ting jeg også så undervejs i mine forsøg.

Det lader vist til at jeg må finde en anden måde at afslutte siden på - IE6 kan desværre ikke udelades endnu og da det er mig selv der er min kunde skal der ikke bruges de mange krafter på at bortforklare tekniske problemer og finde en anden løsning :)
Avatar billede olebole Juniormester
17. november 2008 - 14:10 #11
keysersoze >> Nej, den detalje giver min udredning her ikke nogen forklaring på. Jeg ved, der er et sted på W3C, der omhandler denne problematik. Jeg husker det ikke nøjagtigt, men det handler vistnok noget om, at når man fjerner/undlader alle præsentations properties (undtaget dimensioner) på dokument elementet, overtager body elementet 'pladsen som canvas'. Jeg er på arbejdet lige nu og har derfor ikke tid til at 'forske' i W3C på nuværende tidspunkt.

IE6 løses vel bare med conditional comments ... den opfører sig, såvidt jeg husker, som du forventer med 'height:100%'
Avatar billede keysersoze Ekspert
17. november 2008 - 18:42 #12
Jeg har desværre ikke IE6 kørende her og den standalone jeg har fungerer af en eller anden grund ikke på denne maskine så jeg har kun foretaget en hurtig test gennem browsershots.org og det ser ud til at være nok at erstatte height: 100%; med min-height: 100%; i html.

Men hvis der er en af jer der kan foretage en hurtig test - adressen er den samme som hele tiden - må i meget gerne det og så melde tilbage :)
Avatar billede keysersoze Ekspert
17. november 2008 - 18:48 #13
... og nej, der var jeg godt nok for hurtigt ude. Hvis der ikke er indhold til at fylde minimum skærmhøjden ryger body-baggrund med op til indholdets bund.
Avatar billede olebole Juniormester
17. november 2008 - 20:55 #14
Hos mig virker denne kode fint i FF, IE7 og Opera:

    <style type="text/css">
      html
      {
        background-color: #ff0;
        min-height: 100%;
      }
     
      body
      {
        margin: 0px;
        background-color: #f00;
        height: 100%;
      }
    </style>

<div style="width:30px;height:2000px;background:#0f0;">Indhold</div>

I IE6 burde det virke, hvis du skriver 'height:100%' begge steder
Avatar billede olebole Juniormester
17. november 2008 - 20:58 #15
Din egen kode virker også hos mig i FF, IE7, Opera - samt IE6
Avatar billede keysersoze Ekspert
17. november 2008 - 21:23 #16
så prøv at sæt height på div til fx 100px - så følger grøn ikke med hele vejen til bunden.
Avatar billede keysersoze Ekspert
17. november 2008 - 21:24 #17
Det løser selvfølgelig det oprindelige problem - men, medmindre jeg har overset noget, så betyder det et anden problem.
Avatar billede keysersoze Ekspert
18. november 2008 - 18:21 #18
Du/i har ikke en idé til det nyopståede problem?
Avatar billede keysersoze Ekspert
23. november 2008 - 13:01 #19
nå - jeg finder på en anden afslutning på siden, tak for forsøget samt forklaringen om hvem der er canvas i hvert fald. Der må gerne lægges et svar selvom jeg ikke fandt den endelige løsning.
Avatar billede keysersoze Ekspert
02. december 2008 - 12:47 #20
intet svar?
Avatar billede zips Juniormester
02. december 2008 - 13:08 #21
Ikke noget til mig :)
Avatar billede keysersoze Ekspert
29. december 2008 - 12:58 #22
så må jeg hellere lukke selv - tak for al respons i hvert fald :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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

Seneste spørgsmål Seneste aktivitet
I dag 16:10 Tomt felt i Start Af ErikHg i Windows
I går 23:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows