Het kan op twee manieren, met CSS3 (simpel, maar het werkt niet in IE8 en ouder) of door een normale <img /> als achtergrond te gebruiken (werkt in iedere browser maar kost iets meer moeite.
CSS3:
Code:
#middle{
background-size:80%;
}
Met <img>
Zet een afbeelding met de achtergrond in je #middle div met class="achtergrond". In de CSS zet je dan dit.
Code:
#middle{
width:80%;
position:relative;
margin:o auto; //dit houdt de boel in het midden
}
.achtergrond{
position:absolute;
width:100%;
z-index:-1;//met dit getal moet je misschien wat experimenteren.
}
ECHTER, je hebt een fundamentele fout gemaakt. Je achtergrond is niet echt een achtergrond.
http://www.beatz.calvins.nl/images/middle.png heeft niet alleen de achtergrond in zich maar ook de complete structuur van je site met menutekst. Dit heeft een aantal grote nadelen.
1) Google kan je site niet goed indexeren omdat het geen tekst in plaatjes kan lezen, mensen die van schermlezers afhankelijk zijn zullen ook weinig met je site kunnen doen.
2) Je bent alle flexibiliteit kwijt, als je ook maar iets meer tekst hebt dan in je oorspronkelijke ontwerp dan gaat het buiten de vakken.
3) Als je ook maar iets wilt veranderen moet je de hele afbeelding aanpassen.
4) Het maakt je site zwaarder dan nodig is.
5) Het wordt een nachtmerrie om alles bij alle resoluties op de goede plek te krijgen.
Je kunt beter even naar de links in mijn handtekening kijken, daar staat goed uitgelegd hoe je wel een site moet opbouwen.
Er zijn er vast nog wel wat meer maar dit is wat me nu even te binnen schiet
Maar ook daar heeft hij niks aan, het ding moet met de venstergrote mee rekken.
