background-image

Status
Niet open voor verdere reacties.
0

0 Stefan 0

Nieuwe gebruiker
Lid geworden
2 nov 2007
Berichten
3
Ik ben dus begonnen met css kom er wel aardig mee over weg maar één ding kom ik echt niet uit mijn background image doet het niet als ik een nieuwe div aan maak

Hier de code

Html code:
<html>
<head>
<link rel="stylesheet" href="css/mystyles.css" type="text/css">
</head>
<body>
<div id="banner"></div>
</body>
</html>
Klik om te vergroten...

Css code:
#banner{
background-image:url(images/banner.jpeg);
}
Klik om te vergroten...

Maar het plaatje word helemaal niet weergegeven en stel ik zet tekst tussen de divs in de html code dan komt er wel gewoon die tekst maar zonder de aangevraagde achtergrond image

Ik ben er nu al tijdje mee aan het proberen geweest maar kom er niet uit.

Het zal denk ik vast wel iets heel makkelijks zijn maar ik zie het zo even niet.

Iemand die me helpt misschien?
 
Ik denk dat je een foutje hebt gemaakt het de extensie van het plaatje. je hebt staan .jpeg waarschijnlijk moet het .jpg zijn. Het kan ook zijn dat het met hoofdletters moet. Dit ligt er aan hoe je het plaatje hebt opgeslagen.

#banner
{
background-image:url(images/banner.jpg);
}
 
Ik zie dat je geen doctype gebruikt. Dat is heel belangrijk als je met css werkt, omdat anders Internet Explorer je lay-out totaal anders gaat weergeven dan alle andere browsers. Althans: die kans is heel groot.
Geldige doctypes vind je hier:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Kopieer beide regels, het doctype én de url, anders werkt het niet altijd.
Dit zet je op de allereerste regels in je html, er mag zelfs geen spatie of lege regel voor staan, anders werkt het niet in Internet Explorer 6.
Ik meld 't maar even omdat je zegt net met css te beginnen, en vaak kun je weer helemaal opnieuw beginnen met je site als je niet gelijk met 'n doctype werkt.
 
Woutertjuh88 zei:
Ik denk dat je een foutje hebt gemaakt het de extensie van het plaatje. je hebt staan .jpeg waarschijnlijk moet het .jpg zijn. Het kan ook zijn dat het met hoofdletters moet. Dit ligt er aan hoe je het plaatje hebt opgeslagen.

#banner
{
background-image:url(images/banner.jpg);
}
Klik om te vergroten...
Heb ik ook geprobeerd en goed naar gekeken maar werkte ook niet ik weet bijna zeker dat alles klopt maar toch werkt het niet heel raar.


Goeroeboeroe zei:
Ik zie dat je geen doctype gebruikt. Dat is heel belangrijk als je met css werkt, omdat anders Internet Explorer je lay-out totaal anders gaat weergeven dan alle andere browsers. Althans: die kans is heel groot.
Geldige doctypes vind je hier:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Kopieer beide regels, het doctype én de url, anders werkt het niet altijd.
Dit zet je op de allereerste regels in je html, er mag zelfs geen spatie of lege regel voor staan, anders werkt het niet in Internet Explorer 6.
Ik meld 't maar even omdat je zegt net met css te beginnen, en vaak kun je weer helemaal opnieuw beginnen met je site als je niet gelijk met 'n doctype werkt.
Klik om te vergroten...
Ja was ik even vergeten :$ Normaal zet ik het er wel in heb ik namelijk ook al geleerd.





Maar mijn probleem is nog steeds niet opgelost iemand enig idee?
 
Je weet bijna zeker dat alles klopt, maar het werkt niet. Dan vermoed ik toch dat er iets niet klopt :D
Het beste zou zijn om even 'n link naar de code op internet hier te zetten, dan kunnen we 'op de plek zelf' kijken wat er mis is.
Weet je absoluut zeker dat je geen hoofdletters in de bestandsnaam hebt gebruikt? In Windows maakt dat geen verschil, op de meeste servers wel.
Klopt het pad?
Kloppen pad en naam naar het css-bestand?
Als je in plaats van wat er nu staat even in je css zet:
Code: 
#banner{
background-color: red;
}
moet de achtergrond van de div rood worden. Als dat niet gebeurt, weet je zeker dat de stylesheet niet wordt gevonden. Als het wel rood wordt, weet je zeker dat de stylesheet de afbeelding niet vindt.
Het kan haast niet anders of het is een van deze dingen. Maar zonder html en css zelf 'live' te zien is dat van hieruit niet te beoordelen.

Edit: de div moet trouwens wel 'n hoogte en breedte hebben, of er moet tekst in staan. Als er niets in de div staat en deze ook geen hoogte en breedte heeft, heeft hij ook geen ruimte voor 'n achtergrond-afbeelding.
Dus je kunt ook nog even proberen:
Code: 
#banner{
background-image:url(images/banner.jpeg);
height: 100px;
width: 100px;
}
Waarbij je dan de 100px verandert in de maten van de achtergrond-afbeelding.
 
Laatst bewerkt:
Goeroeboeroe zei:
Je weet bijna zeker dat alles klopt, maar het werkt niet. Dan vermoed ik toch dat er iets niet klopt :D
Het beste zou zijn om even 'n link naar de code op internet hier te zetten, dan kunnen we 'op de plek zelf' kijken wat er mis is.
Weet je absoluut zeker dat je geen hoofdletters in de bestandsnaam hebt gebruikt? In Windows maakt dat geen verschil, op de meeste servers wel.
Klopt het pad?
Kloppen pad en naam naar het css-bestand?
Als je in plaats van wat er nu staat even in je css zet:
Code: 
#banner{
background-color: red;
}
moet de achtergrond van de div rood worden. Als dat niet gebeurt, weet je zeker dat de stylesheet niet wordt gevonden. Als het wel rood wordt, weet je zeker dat de stylesheet de afbeelding niet vindt.
Het kan haast niet anders of het is een van deze dingen. Maar zonder html en css zelf 'live' te zien is dat van hieruit niet te beoordelen.

Edit: de div moet trouwens wel 'n hoogte en breedte hebben, of er moet tekst in staan. Als er niets in de div staat en deze ook geen hoogte en breedte heeft, heeft hij ook geen ruimte voor 'n achtergrond-afbeelding.
Dus je kunt ook nog even proberen:
Code: 
#banner{
background-image:url(images/banner.jpeg);
height: 100px;
width: 100px;
}
Waarbij je dan de 100px verandert in de maten van de achtergrond-afbeelding.
Klik om te vergroten...

Dat met kleur werkt wel gewoon en ik had tevens net even geprobeerd met een link dus zoiets als background-image:url(http://www.testtest/com/banner.jpg); en dat deed het wel gewoon.

Hier nog eens de css code:
#banner{
background-image:url(images/banner.jpg);
height:198px;
width:955px;
}
Klik om te vergroten...

Hier nog eens de html code:
<!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">
<html>
<head>
<link rel="stylesheet" href="css/mystyles.css" type="text/css">
</head>
<body>
<div id="banner"></div>
</body>
</html>
Klik om te vergroten...

En hier heb ik de html online gezet je ziet niks omdat het niet word weergegeven maar het zijn wel deze codes maar dan live. Je ziet ook dat er ruimte word gemaakt voor de image maar de image zelf word niet weergegeven heel raar dus.

Hier de link http://stefan035.woelmuis.nl/index.html
 
Da's 'n stuk makkelijker met 'n link!
Er zit 'n hele serie fouten in je html.
Als je je site door de validator haalt op http://validator.w3.org/
worden 'n hele hoop fouten gevonden, die je dan kunt verbeteren. Dat is echt 'n heel handig hulpmiddel.
Je hebt er 'n doctype boven staan, maar dat is niet juist. Je hebt het kennelijk opgeslagen vanuit een tekstverwerker met opmaakcodes of zo, want de aanhalingstekens zijn 'grafisch', 't zijn geen gewone aanhalingstekens. Je moet 't opslaan als gewone tekst in utf-8-formaat. Dat kun je vinden bij Opslaan, Opslaan als, of bij instellingen.
Vrijwel elke tekstverwerker kan dat tegenwoordig. Als de jouwe dat niet kan, moet je onmiddellijk 'n betere nemen want dan is hij volstrekt verouderd of absolute bagger. Notepad++ is 'n goede en gratis. (Let op de ++ achter de naam...)

De validator slaat hier zo door op hol, dat hij van schrik helemaal stopt, dus dit is ook niet gezond voor 'n browser. Dat moet je dus als eerste verbeteren.

Er staat twee keer <html> in. Dat is een keer te veel. Als je die eerste fout met 't doctype hebt verbeterd en nogmaals valideert, zal de validator dat ook melden.

Er staat ná </body> </html> nog van alles. Dat mag niet, </body> en </html> moeten het laatste zijn. Ook dat zal de validator melden als hij de komma's overleeft.

Nou denk je vast "ik zal nog 'ns wat vragen, pfff, krijg ik nog geeneens antwoord op m'n echte vraag". Bij deze dus:

Als je 'n plaatje als achtergrond plaatst, heeft dat nooit 'n afmeting van zichzelf. Het vult alleen maar de achtergrond van de div, <p>, of wat dan ook waar 't in staat.
Jouw div moet dus hoogte hebben. Om de hele background-image weer te geven moet je de div 'n breedte van 955px en 'n hoogte van 198px geven.

Dan zit er nog 'n fout in je pad. Je hebt als pad opgegeven url(images/banner.jpg);. Dat pad is opgegeven vanuit de map /css. Nu gaat er dus IN de map css gezocht worden naar de map /images. Maar die is er niet.
Je moet 'n niveau hoger zoeken naar de map /images: url(../images/banner.jpg);

Dus in de css moet komen te staan:
Code: 
#banner {
background-image: url(../images/banner.jpg);
width: 955px;
height: 198px;
}

En dan is het ook nog handig om 'n achtergrondkleur toe te voegen voor 't geval dat mensen geen plaatjes willen zien, of dat 't plaatje niet wordt geladen omdat de server even de hik heeft of zo. Je kunt dat doen met background-image én background-color, maar je kunt 't ook combineren:
Code: 
#banner {
background: #fff, url(../images/banner.jpg);
width: 955px;
height:198px;
}
#fff is gewoon wit. Eigenlijk is dat #ffffff, maar 2 dezelfde mag je samenvoegen tot 1.
Als 't plaatje nu niet wordt geladen, wordt de achtergrond gewoon wit.

Maar je moet dus eerst dat doctype en die twee keer <html> en zo verbeteren, want dat soort dingen kan echt de wildste fouten opleveren.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan