Fixed background

[geertd]

Hallo allemaal,

Ik ben met een website bezig waarvan ik de achtergrond heb vast gezet zodat 'ie bij het scrollen niet mee scrollt. Dit heb ik gemaakt op een computer met een resolutie van 1024x768 en werkte perfect. Nu ik echter 's avonds op een computer kijk met een resolutie van 1680x1050 scrollt de achtergrond weliswaar niet mee, maar zie ik rechts dat de afbeelding opnieuw begint. Kan ik op de een of andere manier de achtergrond uitvullen? Of is er nog een andere handigere manier?

Alvast bedankt,

Geert

 

[That Guy]

Zelf vind ik de shorthand het makkelijkste:[JS]/* css */

body
{
background: #fff url(link/naar/plaatje.ext) no-repeat 0px 5px;
}[/JS]Ik denk dat je hier en/of hier de rest van de info wel vandaan kan halen.

 

[geertd]

Als ik dat doe krijg ik rechts naast de afbeelding een blauwe balk.

 

[That Guy]

Ja, dat klopt. Je zet nu je achtergrond-plaatje op locatie 0px 0px van linksboven. Je moet dus even met deze waardes spelen om de goede te vinden. :thumb:

 

[Goeroeboeroe]

Je kunt die achtergrond niet groter of kleiner maken, want dat kan gewoon niet bij 'n background-image. (En als 't wel zou kunnen heb je grote kans dat 't foeilelijk wordt, want zelfs gespecialiseerde grafische programma's hebben daar vaak moeite mee.)

Maar waarom zet je de hele pagina niet in het midden? Dan gaat de achtergrond gewoon mee naar het midden. Als de pagina 'n bepaalde breedte heeft, en daar lijkt het wel op, kun je dit doen:

body {width: 1000px; margin: 0 auto;}

Die breedte moet je natuurlijk aanpassen. Nu zal de body en dus alles daarin, waaronder de achtergrond, altijd horizontaal in het midden van het venster staan.

Als je dan aan html 'n achtergrondkleur geeft die aansluit op je background-image, zal je pagina er altijd goed uitzien. Dit is trouwens 'n oplossing die heel vaak wordt gebruikt. 't Alternatief is 'n background-image die groot genoeg is voor 't grootste scherm, maar daar maak je je niet populair mee, want dat wordt 'n heel groot bestand.
Iets als

html {background: #211442;}