Blok element

Een div tag wordt eigenlijk alleen maar gebruikt voor de opmaak van een pagina. De tag zelf doet niets. Belangrijk om te weten is dat een div regel vullend is.

<style>
    .bg-gray {
        background-color: lightgray;
    }
</style>
<div class="bg-gray">Ik ben een tekst</div>

Door de achtergrond kleur kan je zien dat het div element de hele pagina breedte gebruikt.

Vaak worden delen van een pagina in een div geplaatst om deze een margin / padding te geven.

Hieronder het verschil tussen beide

margin-paddding

Margin geef ruimte om het div-element. En padding geeft ruimte binnen het div-element.

Gebruikte code voor het voorbeeld

<style>
    div {
        background-color: lightgray;
    }

    .blok1 {
        margin: 20px;
    }

    .blok2 {
        padding: 20px;
    }
</style>
<div class="blok1">Margin 20px</div>
<div class="blok2">Padding 20px</div>

 

Achtergrond afbeelding

Een div element kan je met CSS ook een achtergrond afbeelding geven.

background image

Hiervoor plaats je een afbeelding in je map 'images' in dit geval 'twinkel.jpg'

<style>
    .twinkel {
        background-image: url("images/twinkel.jpg"); /* de achtergrond afbeelding*/
        /* overige opmaak*/
        color: white;
        font-size: 3rem;
        height: 150px;
        padding: 10px;
    }
</style>
<div class="twinkel">Zie mijn achtergrond</div>

Je kan ook de doorzichtigheid van je afbeelding aanpassen. (dit kan ook bij kleuren)

opacity: 0.25;

Waarde van 0-1 waarbij 0 volledig doorzichtig en 1 niet doorzichtig.

opacity