achtergrond afbeelding per pagina

[Koenie]

Hallo,

Sinds een paar dagen ben ik aan het stoeien met css.
Ik heb een website met verschillende pagina's.
Deze pagina's moeten allen een eigen achtergrond afbeelding krijgen, maar ik krijg het niet voor elkaar.

Ik heb het nu zo voor elkaar dat op elke pagina dezelfde achtergrondafbeelding staat, maar dit is dus niet de bedoeling.

Weet iemand of dit uberhaupt wel kan met css en wil die het mij uitleggen?

Monique

 

[Tha Devil]

Kan door een bepaald element een andere class/id te geven

.plaatje1 {
  background: url(plaatje1.jpg);
}

.plaatje2 {
  background: url(plaatje2.jpg);
}

 

[Koenie]

Hoi Devil,

bedankt voor je snelle reactie!!!!!

waar moet ik de class/id dan precies in mijn css code zetten?

hieronder mijn code.
Het plaatje content_back.jpg staat dus op alle pagina's maar dit wil ik dus veranderd hebben.

BODY {
background-color: #dbdbdb;
color: #ae0004;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
}

#main {
width: 900px;
height: auto;
margin: 0px;
}

#header {
width: 900px;
height: 190px;
background-image:url(../IMG/logo.jpg);
background-repeat:no-repeat;

}

#header_name {
color: #ec6400;
font-size: 32px;
padding-left: 20px;
padding-top: 20px;
}

#header_slogan {
color: #518dff;
font-size: 18px;
padding-left: 100px;
padding-top: 0px;
}

#menu {
width: 900px;
height: 20px;
margin-top: 10px;
background-color:#7d6642;
}


#content {
width: 888px;
height: auto;
min-height: 500px;
margin-top: 10px;
padding: 5px;
background-color: #fff;
[B]background-image:url(../IMG/content_back.jpg);[/B]
background-position: top right;
background-repeat:no-repeat;
border: 1px solid #ec6400;
}
  

#content_title {
color: #518dff;
font-size: 16px;
padding-left: 15px;
}

#content_text {
font-size: 11px;
padding-left: 15px;
}

#copyright {
color: #868686;
width: 888px;
height: 20px;
margin-top: 5px;
background-color: #dbdbdb;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

 

[Tha Devil]

Als je dit doet:

#content {
  width: 888px;
  height: auto;
  min-height: 500px;
  margin-top: 10px;
  padding: 5px;
  background-color: #fff;
  background-position: top right;
  background-repeat:no-repeat;
  border: 1px solid #ec6400;
}

#image_home {
  background-image:url(../IMG/content_back.jpg);
}
#image_contact {
  background-image:url(../IMG/content_front.jpg);
}

In mijn voorbeeld heb ik elke afbeelding een ID gegeven waarbij de pagina achter de underscore komt.

Als je dan je pagina hebt zul je iets van dit hebben:

<div id="content">

Daar maak je dan op de juiste pagina dit van

<div id="content image_home">

Dus gewoon een spatie na content en dan de naam van de juiste ID

 

[Koenie]

Hoi Devil,

Een beetje late reactie, maar beter laat dan niet denken we dan maar.
Het is me gelukt.
Bedankt voor het meedenken.

Monique