Avatar billede fab Nybegynder
23. november 2007 - 10:14 Der er 5 kommentarer

Background attachment problem med scroll! IE og Firefox

Kære eksperter,

Jeg har et problem, som er velkendt, omend med modsat fortegn. Derfor har jeg ikke kunne benytte de svar der ligger herinde - derfor;

Jeg har en meget bred side (scroll til siden), hvor jeg har et baggrundsbilelde attached i venstre side. Jeg ønsker at baggrundsbilledet skal scrolle med baggrunden, når man scroller siden horisontalt. Mit problem er, at det virker i IE (gudhjælpemig) og ikke i Firefox.

#contentcanvas {
width: 100%;
background-attachment :scroll !important;
background-position : 0% 50%;
background-repeat : no-repeat;
background-color : #dddddd;
background-image : url(files/gfx/background.gif);
background-repeat : no-repeat;
overflow-x : scroll;
overfolw-y : hidden;
}

Der ligger en masse indhold i diven, som gør den dejlig bred, og man kan fint scrolle hen og se alt indholdet - men baggrunden flytter sig ikke i Firefox - altså, den skal være "brændt" ind i div'en, så når jeg scroller til venstre, så flytter baggrundsbilledet sig ud til højre.

Jeg har siddet en del med det nu, og er bange for at jeg har stirret mig blind på det.

Kan i hjælpe?
Avatar billede w13 Novice
23. november 2007 - 14:22 #1
Heller ikke, hvis du blot skriver:
  background-attachment: scroll;
og ikke:
  background-attachment: scroll !important;
?
Avatar billede fab Nybegynder
23. november 2007 - 17:18 #2
ja, desværre. jeg kan sgu ikke rigtig forstå det.
Avatar billede w13 Novice
23. november 2007 - 17:19 #3
fixed i stedet for scroll løser det ikke?
Avatar billede fab Nybegynder
25. november 2007 - 22:11 #4
desværre ikke. her, tjek koden - any workaround much appreciated. måske skal der flere point på spil førend vi kan knække denne?

<html>
<head>
<title>BØVL MED BACKGROUND IMAGE</title>

</head>
<body>
           
<style>
#contentcanvas {
position : absolute;
width : 100%;   
height : 78%;
top : 8%;
overflow-x : scroll;
overflow-y : hidden;
background-image: url(http://politiken.dk/archive/00220/No_name_220667b.jpg);
background-position : 0% 20%;
background-attachment : scroll;
background-repeat: no-repeat;
background-color: #ffffff;
            }           
       
table {
width:3000px;
height: 100px;
border: 2px dashed #000000;
}   
           
</style>

<div id="contentcanvas">

    CONTENTCANVAS
   
        <table>
            <tr>
                <td>CELL</td>
            </tr>
        </table>

</div>


</body>
</html>
Avatar billede fab Nybegynder
25. november 2007 - 23:05 #5
Jeg har løst problemet ved at lave et ekstra lag inde i  #contentcanvas som indeholder baggrundsbilledet og justeret det med position styles. Det er lidt grim css og html med sådan et ekstra lag til et baggrundsbillede. Hvis der findes en løsning som ikke er et workaround - eller en henvisning til hvor jeg begår en fejl, så blvier jeg meget glad.
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