afbeelding als achtergrond

[basdebaas]

Ik probeer een afbeelding als achtergrond op te nemen met z-index: 0 en z-index 1 . maar dit lukt mij niet dit is de code:

html:

<div id="background_image">
    <img src="templates/quintens_new/images/background.jpg" class="stretch_background" alt="" />
  </div>
<div id='rest'>
<p>Test</p>

css:

#background_image {
    width: 100%; 
    height: 100%; 
    position: absolute;
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch_background {
    width:100%;
    height:100%;
}
#test{
z-index: 0;
}

nu wil ik graag dat "test" over de afbeelding heen valt, maar met deze code staat hij er gewoon onder.

weet iemand hoe ik dit voor elkaar kan krijgen?

groet,,
Bas

 

[Sevo]

Je moet ook een container hebben (of in body), daarin moet je plaatsen i.p.v. wat jij hebt:

Background-image: url('../../naamvanhetplaatje.png');

 

[basdebaas]

dat begrijp ik niet helemaal....

 

[Sevo]

<img src="templates/quintens_new/images/background.jpg" class="stretch_background" alt="" />

Waarom dit als je ook gewoon in CSS de bovenstaande code kan invoegen ..

 

[basdebaas]

ja, klopt. dat heb ik niet uitgelegd, maar de reden dat het zo moeilijk moet is dat ik de afbeelding schermvullend op de achtergrond wil, nu is dit gelukt alleen niet krijg ik de rest van de website er niet overheen. ik kan background-size gebruiken maar deze wordt nog niet door alle webbrowsers herkend.

 

[Sevo]

Kun je dit misschien online zetten en aan ons laten zien, maakt het gemakkelijker

 

[basdebaas]

natuurlijk:

http://83.161.249.164/quintens

http://83.161.249.164/quintens/index.php
http://83.161.249.164/quintens/templates/quintens_new/css/template.css

 

[basdebaas]

mijn excuses als de server ontoegankelijk was, zou nu opgelost moeten zijn.(hij stond namelijk uit)

 

[Sevo]

Ik zie helemaal niks op die site, alleen een achtergrond die langzamerhand verschijnt. Is dat het probleem?

Zo?

body  {
background-image: url('file.png'); 
z-index: 0;

 

[basdebaas]

die afbeelding wil ik dus als achtergrond, maar als ik dat via background-image doe in de body dat laat hij gewoon de afbeelding zien op een veel te grote schaal. nu wil ik dat die afbeelding netjes op de achtergrond staat maar geschaald. nu ben ik er achter gekomen dat dit niet kan via background-image, nu heb ik hem al wel zo ver gekregen dat hij mooi geschaald is, en nu wil ik alleen nog dat deze image op de achtergrond staat.

 

[Sevo]

Dat is vreemd dat hij niet op de achtergrond komt, maar hij staat ook voor het content. En dat is niet de bedoeling neem ik aan. Probeer het eens aan te passen met Firebug?

 

[basdebaas]

http://83.161.249.164/test
ik heb het even in envoudig html gemaakt om fouten uit te sluiten en ik heb wat gegoogeld, nu blijkt dat ik #rest ook een positie moet geven en dan werk hij, http://83.161.249.164/main.css

Bedankt voor de moeite,

Bas