CSS: afbeelding invoegen - zo werkt het
In deze praktische tip leggen we uit hoe u een afbeelding invoegt met CSS. In principe kunnen afbeeldingen hier alleen worden ingevoegd in de vorm van achtergrondafbeeldingen. Dat is echter voldoende.
Afbeelding invoegen in CSS
Als u bijvoorbeeld een afbeelding in de kop wilt opnemen met CSS, zoals uw logo, geeft u de volgende eigenschappen aan onder #header:
- "achtergrond: url (image.webp) #FFFFFF;"
- Hier wordt "bild.webp" opgevat als de URL naar uw afbeelding, relatief ten opzichte van het css-bestand of als een absoluut adres op uw schijf.
- Met de kleur declareer je de achtergrondkleur op je website.
- De afbeelding kan nu worden gepositioneerd met behulp van een exacte positie, zoals: "achtergrondpositie: 100px 100px;" of via relatieve informatie bepaald door de vensterrand, zoals "achtergrondpositie: rechtsonder;".
- Zodat uw afbeelding zichzelf niet continu herhaalt, kunt u een "no-repeat" specificeren onder de eigenschap "background-repeat". Het ziet er zo uit: "background-repeat: no-repeat;".
- Met de eigenschap "achtergrond-bijlage" bepaalt u of de afbeelding beweegt met het scrollen of op een vaste plaats op de pagina blijft: "achtergrond-bijlage: vast;".
- De eigenschappen worden zonder aanhalingstekens in het CSS-bestand opgegeven.
Lees in de volgende praktische tip hoe u een CSS-bestand met HTML kunt integreren.