Hallo,

Ik heb een probleem. Ik ben bezig met een website. Nu wil ik de achtergrond in het midden hebben. Hoe kan ik dit doen in HTML/CSS ?

hoe bedoel je achtergrond? Je zal zoiszo een achtergrondkleur/prent hebben die zich helemaal uitspreid. Je kan hierover dan wel een afbeelding zetten in het midden.

Hallo,

Ik heb een probleem. Ik ben bezig met een website. Nu wil ik de achtergrond in het midden hebben. Hoe kan ik dit doen in HTML/CSS ?

Dat doe je via het background-position (http://www.handleidinghtml.nl/css/eigenschappen/background-position/beschrijving.html) CSS element.


hoe bedoel je achtergrond? Je zal zoiszo een achtergrondkleur/prent hebben die zich helemaal uitspreid. Je kan hierover dan wel een afbeelding zetten in het midden.

Dat hoeft niet. Standaard staat een background-image op repeat, maar je kan background-repeat (http://www.handleidinghtml.nl/css/eigenschappen/background-repeat/beschrijving.html) ook op no-repeat zetten.


Een voorbeeld van een (top) gecentreerde achtergrondafbeelding die zich verticaal herhaalt:

body {
background-image: url(/images/bgimg.jpg);
background-repeat: repeat-y;
background-position: 50% 0%;
}
Of korter:

body {
background: url(/images/bgimg.jpg) repeat-y 50% 0%;
}

Dat hoeft niet. Standaard staat een background-image op repeat, maar je kan background-repeat (http://www.handleidinghtml.nl/css/eigenschappen/background-repeat/beschrijving.html) ook op no-repeat zetten.

Ja maar als je achtergrond dan niet groot genoeg is, is de achtergrond daarachter nog wit, dan bedoelde ik... (ik weet ook wel dat je het kan veranderen naar een andere kleur maar dan heb je "twee" achtergronden niet?)

Adri

Ja maar als je achtergrond dan niet groot genoeg is, is de achtergrond daarachter nog wit, dan bedoelde ik... (ik weet ook wel dat je het kan veranderen naar een andere kleur maar dan heb je "twee" achtergronden niet?)

Adri

Inderdaad, maar dat zal mogelijk worden in CSS 3 en wordt momenteel ook al ondersteund in Safari en Chrome (Webkit renderengine).

http://www.css3.info/preview/multiple-backgrounds/

Hartelijk bedankt, het werkt :D.