[CSS] background-image FF, IE, Chrome

[Verwijderd]

Dit werkt enkel in FF:
body {
background-color: #000000;
background-image: url(img/m46m47_hetlage_f.jpg);
background-repeat: repeat;
color: #FFFFFF;
}

en dit werkt alleen in IE en Chrome (check the puntjes):
body {
background-color: #000000;
background-image: url(../img/m46m47_hetlage_f.jpg);
background-repeat: repeat;
color: #FFFFFF;
}

/spank FF
Weet iemand een _CSS_ oplossing zodat ze allemaal het ermee eens zijn?

[ Voor 7% gewijzigd door Verwijderd op 04-01-2009 05:22 ]

[Verwijderd]

Zou je wat meer van je code kunnen posten, want ik kan het probleem niet reconstrueren. Ik heb zojuist een pagina gemaakt waarbij een extern CSS bestand een background-image inlaadt. De mappenstructuur is als volgt:
/index.htm
/css/style.css
/images/image.png
Voor zover ik het uit jouw post op kan maken is dit ongeveer hetzelfde als in jouw situatie. Bij mij werkt het in alle browsers die ik getest heb gewoon correct (Opera, Fx, Chrome en meerdere IE's).

Je zou ook alle paden kunnen veranderen naar absolute paden in plaats van relatieve paden. Je moet dan wel elke keer dingen aan gaan passen als je de locatie van de pagina verandert.

[Zakkenwasser]

Verwijderd schreef op zondag 04 januari 2009 @ 05:21:
Dit werkt enkel in FF:
body {
background-color: #000000;
background-image: url(img/m46m47_hetlage_f.jpg);
background-repeat: repeat;
color: #FFFFFF;
}

en dit werkt alleen in IE en Chrome (check the puntjes):
body {
background-color: #000000;
background-image: url(../img/m46m47_hetlage_f.jpg);
background-repeat: repeat;
color: #FFFFFF;
}

/spank FF
Weet iemand een _CSS_ oplossing zodat ze allemaal het ermee eens zijn?

ipv background-color, kun je ook background gebruiken, dit werkt op alle browsers.


die ../ moet je alleen gebruiken als je in een andere directorie zit die niet lager is dan de map img

[ Voor 7% gewijzigd door Zakkenwasser op 04-01-2009 14:07 ]

[mcDavid]

MrJey schreef op zondag 04 januari 2009 @ 14:06:
[...]

ipv background-color, kun je ook background gebruiken, dit werkt op alle browsers.

Je bedoelt in plaats van background-color, background-image én background-repeat. En alle andere opties mocht je die nodig hebben.

Voor de rest gewoon absolute paden gebruiken, dan gaat het altijd goed.

[ Voor 10% gewijzigd door mcDavid op 04-01-2009 14:09 ]

[Verwijderd]

Bij mij werkt het ook.

Zowel onder IE als FF.

Cascading Stylesheet:

body {
    background-image: url('plaatje.png');
    background-color: #FF66FF;
    background-repeat: repeat;
    background-attachment: fixed;
}

OF

Cascading Stylesheet:

body {
    background: url('plaatje.png') #FF66FF repeat fixed;
}

[ Voor 18% gewijzigd door Verwijderd op 04-01-2009 19:16 ]

[MediQ]

Wat ik altijd doe (en wat prima werkt cross-browser):

Cascading Stylesheet:

div {
 background: url(images/boe.png);
}

daar kan je eventueel wat dingen aan toevoegen:

Cascading Stylesheet:

div {
 background: #ffffff url(images/boe.png) no-repeat scroll left center;
}

[ Voor 14% gewijzigd door MediQ op 04-01-2009 14:17 ]

[crisp]

MrJey schreef op zondag 04 januari 2009 @ 14:06:
[...]

ipv background-color, kun je ook background gebruiken, dit werkt op alle browsers.

background is niets anders dan een shorthand voor de verschillende background-properties en lost in deze niets op.

die ../ moet je alleen gebruiken als je in een andere directorie zit die niet lager is dan de map img

Dat moet je dan wel verder specificeren. Wat belangrijk is om te weten is of het hier om een extern CSS bestand gaat of inline CSS. In het eerste geval moet je uitgaan van de directory waarin het CSS bestand zich bevind en relatief daaraan je plaatjes refereren. In het tweede geval gaat het om de base url van het document waar de CSS zich in bevind en daar heeft bijvoorbeeld een <base href> ook weer invloed op, alsmede dingen als multiviews (een soort 'virtuele' directory-structuur). Zelfs 'trailing slashes' kunnen dan roet in het eten gooien (http://example.org/index.php is niet hetzelfde als http://example.org/index/). In dat laatste geval is het raadzaam om gewoon absolute URLs te gebruiken, of de CSS te verhuizen naar een extern bestand.

[ Voor 13% gewijzigd door crisp op 04-01-2009 14:21 ]

[MediQ]

Wat Crisp zegt, maar dan iets simpeler :

Als je CSS in <style></style> verpakt in een HTML bestand moeten de url's in je CSS relatief zijn aan het html bestand.
Als je CSS in een .css bestand aan een HTML hangt moeten de url's in je CSS relatief zijn aan het css bestand.

Als je een losse CSS hebt en je hebt in de map van je HTML-bestand een submap 'img' dan zou han_govers eerste code in elke browser moeten werken (net als wat ik in mijn voorbeeld hierboven heb gedaan).

[Verwijderd]

De CSS staat in een extern bestand.
/index.html
/css/style.css
/img/image.jpg

Die "../" hoort er wel degelijk te staan, maar FF 3.0.5 vindt van niet.
Zonder die puntjes is de relatieve link /css/img/image.jpg en daar staan de plaatjes niet (maar FF vindt van wel).
Wanneer ik de CSS + plaatje + index.html samen in één map stop, is het probleem 'verholpen', want dan hoef je nergens een relatieve map aan te duiden.

En background vs background-property maakt niets uit (zoals Papa van Jeremy \o/ al aangaf).
Absolute paden zijn, voor voor de hand liggende redenen, natuurlijk geen optie.

[ Voor 20% gewijzigd door Verwijderd op 04-01-2009 20:39 ]

[Edjaaah]

Volgens mij werkt het in alle browsers als je de volledige URL gebruikt, dus beginnend met http://www

[Cartman!]

Nergens voor nodig om volledige urls te gebruiken, zou ook lekker praktisch zijn als dat moest
Verder zou ik zeggen...lees het 2e stuk van crisp zn post nog eens goed door

[mcDavid]

Edjaaah schreef op dinsdag 06 januari 2009 @ 13:50:
Volgens mij werkt het in alle browsers als je de volledige URL gebruikt, dus beginnend met http://www

Klopt, maar heeft geen enkel voordeel t.o.v. absolute url's beginnende met /, en dat was ook al geen optie begreep ik.

[Da Weef]

Als je een losse CSS hebt en je hebt in de map van je HTML-bestand een submap 'img' dan zou han_govers eerste code in elke browser moeten werken (net als wat ik in mijn voorbeeld hierboven heb gedaan).

QFT... Laat anders de html-source eens zien waarmee je de css aanroept? Ik verwacht eerder dat het probleem daaraan ligt...

[crisp]

@import wellicht?

[Suaver]

Zet er een "/" voor. Dan begint ie toch in de root?

[remmelt]

Ik heb het even nagemaakt, in de test.
index.html
img/plaatje.jpg
css/style.css

code:

div {
  border: 1px solid red;
  background-image: url(../img/appelbloesem.jpg);
}

Dit werkt perfect in FF, in elk geval in 3.0.5. Ik draai wel OSX (10.4) maar dat moet niet uitmaken. Ik heb ook echt nog nooit gehoord dat dat niet zou werken. Dit is dan dus ook niet een FF bug. In Safari werkt het ook zonder morren.

Heb je ergens een conditonal comment? Heb je toevallig nog de oude css in je cache ergens? Daar zou ik eerst eens naar kijken. Wat jij wil kan en werkt wel. De oplossing met de ../ is het netst. Beginnen met een / kan ook maar dan kan je nooit meer je site in een submap stoppen.