CSS Background Image -> Wel kleur, geen afbeelding

[Satom]

Hallo,

ten eerste hoop ik dat ik niet illegaal bezig ben

Ik ben nu al enkele dagen bezig met mijn favoriete taal CSS, het aanpassen van een thema voor mijn website. Mijn bedoeling is om als achtergrond een afbeelding te plaatsen.

Het probleem is echter, dat ik krijg geen afbeelding te zien, alleen maar een kleur, fuchsia kleur!

Dit is het gebruikte CSS code:

code:

body.home { 
  background: url(http://lazytours.nl/wp-content/uploads/2013/04/Stedentrips-Barcelona.jpg) no-repeat fuchsia; 
}

Ik weet 100% zeker dat de afbeelding werkt, maar ik snap niet wat ik verkeerd doe En met Google kom ik ook niet verder, waarschijnlijk zoek ik verkeerd..

Edit: Ik moet er misschien nog wel even bij melden dat ik de afbeelding heel kort wel zie, in Google Chrome, daarna verdwijnt de afbeelding en komt er een mooie fuchsia kleur..

[ Voor 20% gewijzigd door Satom op 09-08-2013 16:55 ]

[Nedra]

heb je een hoogte en breedte gespecificeerd op de div waar je de afbeelding als achtergrond gebruikt?

[ItMeAedri]

Moet de url niet tussen aanhalingstekens? Dus...

code:

background: url('http://www.sotam.nl/wp-content/uploads/2013/06/camp-nou-achtergrond.jpg') no-repeat fuchsia;

[Satom]

Arnlith schreef op vrijdag 09 augustus 2013 @ 16:52:
Moet de url niet tussen aanhalingstekens? Dus...

code:

background: url('http://www.sotam.nl/wp-content/uploads/2013/06/camp-nou-achtergrond.jpg') no-repeat fuchsia;

Helaas, ook al geprobeerd. Ik moet er misschien nog wel even bij melden dat ik de afbeelding heel kort wel zie, in Google Chrome, daarna verdwijnt de afbeelding en komt er een mooie fuchsia kleur..

Nedra schreef op vrijdag 09 augustus 2013 @ 16:50:
heb je een hoogte en breedte gespecificeerd op de div waar je de afbeelding als achtergrond gebruikt?

Nee, het is de bedoeling dat ik de afbeelding op mijn hele achtergrond heb. Zoals de site nu ook is (weet niet of ik het maar zeggen, maar in mijn signature/handtekening staat de link )

[HeSitated]

Dit werkt bij mij:

Cascading Stylesheet:

body
{
    background: url(http://www.sotam.nl/wp-content/uploads/2013/06/camp-nou-achtergrond.jpg) no-repeat fuchsia;
}

#bottom
{
    width: 610px;
    min-height: 400px;
    background: url('http://www.sotam.nl/wp-content/uploads/2013/06/camp-nou-achtergrond.jpg') no-repeat fuchsia;
}

Laat eens wat meer van jouw stylesheet en pagina zien...

Op je site doet ie het ook gewoon... Dus het ligt aan de installatie c.q. inrichting van chrome op jouw machine?

[ Voor 13% gewijzigd door HeSitated op 09-08-2013 16:57 ]

[Satom]

Zal het dan zijn dat er iets tussenzit, iets dat een kleur forceert? Ik heb even een poort open gezet, als het goed is kunt u bij mijn testomgeving komen: -link-

[ Voor 8% gewijzigd door Satom op 09-08-2013 17:57 ]

[HeSitated]

Wat ik zie in je testomgeving is absolute verwijzingen naar localhost i.p.v. relatieve verwijzingen.

Dus ik denk dat je daar naar moet kijken....

[Satom]

Uiteraard is dat een belangrijke punt om naar te kijken en tevens stom dat ik daar niet aan gedacht heb.. Het zou nu goed moeten zijn

[TERW_DAN]

De afbeelding wordt ook gewoon geladen, en hij staat er ook zoals het moet zijn.

Wat je alleen doet is er een div overheen renderen met die paarse achtergrond, waardoor je het element dat eronder ligt niet meer ziet.

zet van jPanelMenu-panel de achtergrond maar eens uit. Als ik dat doe in Dragonfly, dan zie ik gewoon de foto o pde achtergrond.

[Satom]

Klopt helemaal, ik heb dan Firebug gebruikt.. Maar als ik eens verder kijk, zou het ook hieruit kunnen komen? -link-

[ Voor 25% gewijzigd door Satom op 09-08-2013 17:58 ]

[TERW_DAN]

Vast wel, maar dit zou denk ik al prima op te lossen zijn door gewoon geen achtergrond mee te geven aan .jPanelMenu-panel. Tenzij je dat natuurlijk met een reden hebt gedaan (al zie ik op die achtergrond foto na geen verschil).

[Satom]

Helaas is er in de style.css niets aan te passen, aangezien JS na CSS geladen wordt (toch?). Dus ik heb even verder gekeken in de jpanel-menu.js en daar heb ik iets gevonden dat ervoor zorgde dat er een laag overheen gelegd werd. Dit stukje heb ik vanzelf spreken even aangepast (zodat er geen laag gelegd word) en nu werkt het zoals ik het graag wil

Iedereen bedankt voor het helpen

[Zoefff]

De volgorde van laden heeft daar niet zo veel mee te maken; het feit dat je in dit specifieke stuk JS een element een style attribuut meegeeft (gok ik maar even) wel. Zie ook de W3C documentatie over specificiteit. Een andere mogelijkheid dan het aanpassen van de JS is het toevoegen van !important aan de juiste CSS regel; die gaat dan weer boven wat je via JS aangeeft

[drm]

Zoefff:
Een andere mogelijkheid dan het aanpassen van de JS is het toevoegen van !important aan de juiste CSS regel; die gaat dan weer boven wat je via JS aangeeft

Bizar, ik heb nooit geweten dat !important ook binnen de context van toegepaste rules nog invloed had. Misschien omdat ik !important altijd vermijd en dit is weer een reden extra om dat te blijven doen. Ik zou gezworen hebben dat important alleen invloed heeft op hoe de computed style wordt samengesteld.

Zo leer je nog 's wat

[Satom]

Zelfs met !important werkte het niet. Dit trucje had ik wel toegepast bij een andere thema, maar desalniettemin; het werkt nu zoals het moet In ieder geval wel bedankt voor de hulp

[Zoefff]

drm schreef op zondag 11 augustus 2013 @ 13:58:
[...]
Bizar, ik heb nooit geweten dat !important ook binnen de context van toegepaste rules nog invloed had. Misschien omdat ik !important altijd vermijd en dit is weer een reden extra om dat te blijven doen. Ik zou gezworen hebben dat important alleen invloed heeft op hoe de computed style wordt samengesteld.

Zo leer je nog 's wat

Het is ook heel stom om !important te gebruiken en ik vermijd het als de pest. Soms kan ik het voor mezelf rechtvaardigen omdat er anders bijvoorbeeld te veel omgeschreven moet worden (al is dat een indicatie dat de CSS eigenlijk niet helemaal goed in elkaar zit) of wanneer je zoals hier niet wil rommelen in externe scripts (of daar geen invloed op hebt).

Satom schreef op zondag 11 augustus 2013 @ 16:27:
Zelfs met !important werkte het niet. Dit trucje had ik wel toegepast bij een andere thema, maar desalniettemin; het werkt nu zoals het moet In ieder geval wel bedankt voor de hulp

Het zou wel moeten werken, zie ook deze jsFiddle. Wellicht nog een andere combinatie van selectors of specificiteit die roet in het eten gooit? Maargoed, je hebt het al opgelost dus dit zal niet meer dan een theoretisch probleem worden

[Satom]

Je hebt helemaal gelijk. Zo heb ik dat op het moment ook met de huidige/oude website, gewoon met een !important en het werkt zoals gewenst