Achtergrondkleur website

Deze pagina is bijgewerkt op 20 oktober 2020

Ben je een website aan het maken? Dan is de achtergrond van je website erg belangrijk. Om de achtergrond van de website en kleur te geven moet je meestal de body tag gebruiken. Hieronder is een voorbeeld van een CSS code die je kunt gebruiken:

body {
    background-color: #ffff96;
}

Deze code moet in de style.css toegevoegd worden. Ben je op zoek naar de juiste kleurcode? Bekijk dan deze pagina: Kleurcodes.

Achtergrondfoto in plaats van achtergrondkleur website

In plaats van een kleur kun je ook kiezen voor een achtergrondafbeelding. Met een achtergrondafbeelding kun je meteen een heel andere sfeer aan de website mee geven.

Een achtergrond foto plaats je op deze manier:

body {
background-image: url('https://cdn.pixabay.com/photo/2018/06/28/17/02/water-lily-3504363_960_720.jpg');
}

Er zijn nog meer stijlen die je kunt gebruiken voor de achtergrond foto. Zo kun je aangeven dat hij niet herhaalt, zich verspreid over het hele scherm of vast komt te staan:

body {
background-image: url('https://cdn.pixabay.com/photo/2018/06/28/17/02/water-lily-3504363_960_720.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

Ojaa en dit is trouwens een goede website voor mooie gratis foto’s: Pixabay

Andere vragen over de achtergrondkleur website?

Kom je er nog niet helemaal uit of heb je nog andere vragen? Laat hieronder dan een reactie achter en dan help ik je snel verder :)!

6 gedachten over “Achtergrondkleur website”

    1. Hoi Gerrit,

      Ik kan me voorstellen dat je verdwaald kan raken in de CSS code. Kun je mij de inlog van de website sturen zodat ik even kan kijken? Of even een apart account voor me aanmaken? Als je wel weet waar je de CSS codes kan toevoegen dan kan ik je makkelijk even de code sturen die je nodig hebt om de achtergrondkleur te veranderen. Je kunt de gegevens sturen naar info@website-advies-bureau.nl

      Groetjes
      Thamar

        1. Ik heb even voor je gekeken, maar voor jouw website is het wel iets ingewikkelder. Je werkt met Elementor en een uitgebreide template wat het wijzigingen van een achtergrondkleur moeilijker kan maken. Via Weergave > Customizer > Extra CSS (helemaal onderin) heb ik een paar kleine CSS codes toegevoegd die ervoor zorgen dat je nu een andere achtergrondkleur hebt 🙂

          Succes met het maken van je website! En mocht je nog andere vragen hebben stel ze gerust.

          Groetjes Thamar

  1. Ik heb mijn footer ook voorzien van een achtergrond kleur, echter loopt deze op een aantal pagina’s niet volledig door over de gehele scherm, terwijl hij bij de andere pagina’s wel volledig doorloopt over de gehele scherm.
    Ik vind dit heel lelijk uitzien, wat doe ik eventueel fout?

    1. Hoi Sezgin, dat klinkt inderdaad niet mooi! Kan je mij de URL van de website sturen? Dan zal ik even met je mee kijken :)!

Geef een reactie

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *