CSS gebruiken om een ​​achtergrondafbeelding in te stellen

• April 29, 2024

Heb je je ooit afgevraagd hoe websites die mooie ontwerpen en foto's beheren die achter de tekst zweven? Het wordt allemaal gedaan door de magie van Cascading Style Sheets. Met CSS kunt u niet alleen een afbeelding aanwijzen voor de achtergrond van uw pagina, maar kunt u ook aanpassen hoe de afbeelding wordt weergegeven - zodat u precies de gewenste look krijgt.

De fundamentele bouwsteen voor uw achtergrondafbeelding is passend de eigenschap 'achtergrondafbeelding'. U gebruikt deze eigenschap om uw site als volgt te vertellen waar het afbeeldingsbestand zich bevindt:

lichaam {
background-image: url ("image.gif");
}

Dat is alles wat u hoeft te doen om een ​​achtergrondafbeelding voor uw webpagina te plaatsen. Natuurlijk wilt u waarschijnlijk aanpassen hoe de afbeelding wordt weergegeven. Stel dat u wilt dat uw afbeelding bovenaan de pagina begint, maar horizontaal wordt gecentreerd in plaats van links uitgelijnd (de standaarduitlijning). In dat geval wilt u de eigenschap 'background-position' toevoegen aan uw CSS-regel:

lichaam {
background-image: url ("image.gif");
achtergrondpositie: middenboven;
}

Bij het definiëren van de eigenschap 'achtergrondpositie' stelt de eerste waarde de horizontale uitlijning (links, midden of rechts) in en de tweede waarde de verticale uitlijning van de afbeelding (boven, midden of onder).

Vervolgens besluit u dat u wilt voorkomen dat de afbeelding horizontaal wordt herhaald (zichzelf herhaalt), hoewel u wilt dat deze verticaal wordt naast elkaar geplaatst. Het is tijd om de eigenschap 'achtergrond herhalen' uit te brengen:

lichaam {
background-image: url ("image.gif");
achtergrondpositie: middenboven;
achtergrond-herhalen: herhalen-y;
}

Als u de waarde instelt op 'herhaal-y', zegt de browser dat de achtergrondafbeelding langs de y-as, ook wel verticaal, maar niet de x-as (horizontaal) moet worden verdeeld, wat precies is wat we wilden. Als je het horizontaal maar niet verticaal wilt betegelen, zou je in plaats daarvan de waarde 'repeat-x' gebruiken; als u helemaal niet wilt dat de afbeelding wordt naast elkaar geplaatst, geeft u deze de waarde 'niet herhalen'. De standaardwaarde is om de afbeelding zowel horizontaal als verticaal naast elkaar te plaatsen, dus als dat de beste keuze voor uw afbeelding is, hoeft u helemaal geen eigenschap 'achtergrond herhalen' in te stellen.

Tot slot kunt u de eigenschap 'achtergrondbijlage' bekijken. Standaard zal je afbeelding scrollen terwijl de pagina schuift, dus als je de afbeelding niet verticaal herhaalt en je hebt een lange pagina, strekt je afbeelding zich niet uit tot onderaan de pagina. U kunt dit wijzigen door de eigenschap 'achtergrond-bijlage' in te stellen op 'vast', waardoor de achtergrondafbeelding op dezelfde plek op de monitor blijft, ongeacht hoe de pagina schuift. Nu zien uw achtergrondafbeeldingregels er als volgt uit:

lichaam {
background-image: url ("image.gif");
achtergrondpositie: middenboven;
achtergrond-herhalen: herhalen-y;
achtergrond-bijlage: vast;
}


Als u uw CSS-regels zo klein mogelijk wilt houden, kunt u al uw achtergrondwaarden combineren in één regel met behulp van de eigenschap 'background', zoals hier:

achtergrond {
url ("image.gif") repeat-y fixed center top;
}

Wanneer u de eigenschap 'achtergrond' gebruikt, moet u de waarden in een specifieke volgorde vermelden:
[achtergrondkleur (indien gebruikt)] [achtergrondafbeelding] [achtergrondherhaling] [achtergrondbijlage] [achtergrondpositie]. U kunt elke waarde die u niet nodig heeft weglaten, u moet alleen de waarden vermelden die u wel in de juiste volgorde gebruikt, anders werkt de regel niet.

Video-Instructies: Afbeeldingen gebruiken - Les 7 - Website leren bouwen - Basis HTML & CSS (Dutch/NL Tutorial) (April 2024).