[css] positie background in DIV

[Hangloozz]

zijn er CSS guru's die me eens even duidelijk kunnen maken wat ik hier nu weer verkeerd doe?

probleem:
background-image moet netje passend als DIV-achtergrond dienen.
Alleen willen Mozilla en IE(6) allebei een andere vorm van declaratie voor de position.

Wat bedoel je nou?
Nou kijk dan eens hier met Mozilla en hier met IE en andersom, dan zal het je wel duidelijk worden.

oplossing:
ja, graag
Ik weet ut ff niet meer namelijk, heb al bij Meyerweb en Glish enz. gekeken maar kan hierover geen specifiek punt vinden.


O, enne; referenties naar m'n sig neem ik niet serieus

[ Voor 5% gewijzigd door Hangloozz op 06-02-2003 10:36 ]

[disjfa]

background-attachment: fixed;

weglaten. werkt overal

[Willem]

Op deze manier gaat het in IE en Mozilla exact hetzelfde:
http://willem.yoursite.nl/got/hangloozz/test.html

Doe ermee wat je wilt

[Hangloozz]

disjfa schreef op 06 februari 2003 @ 10:41:
background-attachment: fixed;

weglaten. werkt overal

zo dan, maar wat doe je dan tegen die mee onhoog scrollende background?

willem169:
bij jou is de DIV gecentreerd, dat hoeft bij mij niet; de positie van de div is absoluut en vast.
Ik zal iig even kijken wat jij wel hebt en ik niet

edit:


zodra ik de DIV absoluut positioneer en background vastzet is het over; dan treden de verschillen tussen Mozilla en IE op.
Wat disjfa zei klopt dus waarschijnlijk wel; de fixed zorgt voor de verschuiving.
Bij iemand een workaround bekend?

[ Voor 25% gewijzigd door Hangloozz op 06-02-2003 11:01 ]

[Willem]

Zo doet 'ie het ook:
http://willem.yoursite.nl/got/hangloozz/test-02.html

[disjfa]

code:

    #contentContainer{
                position: absolute;
                top:82px;
                left:114px;
                width:633px;
                height:342px;
                background-image: url(http://www.zicht.nl/tweakers/images/leden_blauwoverlay_bg.jpg);
                background-attachment : fixed;
                background-repeat: no-repeat;
                background-position: 114px 82px;*/ /*werkt met mozilla, niet met IE*/
                background-position: top left;  /*werkt met IE, niet met Mozilla*/
                padding: 0px 0px 0px 0px;
                z-index:25;
                display:block;
                overflow: auto;
                border: 1px solid #FFF;
            }

klinkt loos, ziet er gek uit, zal vast de standaarden toornen, maar het werkt in ie, opera en ns

edit:
willem, zet er nou eens een meuk text in zodat er een scrollbar komt... blijft ie dan nog goed stil staan

[ Voor 9% gewijzigd door disjfa op 06-02-2003 10:59 ]

[Willem]

disjfa:

edit:
willem, zet er nou eens een meuk text in zodat er een scrollbar komt... blijft ie dan nog goed stil staan

http://willem.yoursite.nl/got/hangloozz/test-03.html

dus

[Hangloozz]

disjfa: no way dat het in Mozilla (1.1) werkt...
De afbeelding wordt op positie 0,0 vastgezet; gerelateerd aan het window dus en niet aan de DIV-coordinaten...

[disjfa]

ook een mooie oplossing

Hangloozz... k heb ook geen mozilla 1.1 maar dan dus naar willem luisteren

[ Voor 62% gewijzigd door disjfa op 06-02-2003 11:06 ]

[Verwijderd]

[quote]disjfa schreef op 06 februari 2003 @ 10:58:

code:

    #contentContainer{
                position: absolute;
                top:82px;
                left:114px;
                width:633px;
                height:342px;
                background-image: url(http://www.zicht.nl/tweakers/images/leden_blauwoverlay_bg.jpg);
                background-attachment : fixed;
                background-repeat: no-repeat;
                background-position: 114px 82px;*/ /*werkt met mozilla, niet met IE*/
                background-position: top left;  /*werkt met IE, niet met Mozilla*/
                padding: 0px 0px 0px 0px;
                z-index:25;
                display:block;
                overflow: auto;
                border: 1px solid #FFF;
            }

Hmm. background-position: 14px 15px; werkt prima in IE dacht ik zo?! Kan ook liggen aan de combinatie met andere elementen als fixed oid.

[Hangloozz]

willem169: laat me je zoenen

disjfa: naast dat er een */ teveel staat is het niet echt gestandaardiseerd css nee...en ik ben ervan overtuigd dat dit met juist css dit te realiseren is.

ivy: heb je de draad gelezen? de voorbeelden bekeken? dan had je kunnen zien dat het wel werkt maar ongewenst gedrag oplevert

Al met al heb ik weer vertrouwd op css wat nog niet volledig ondersteund wordt (fixed); met de hack van willem gaat het wel lukken