De background-imageeigenschap in CSS past een afbeelding (bijvoorbeeld PNG, SVG, JPG.webp, GIF, WEBP) of verloop toe op de achtergrond van een element.
Er zijn twee verschillende soorten afbeeldingen die u in CSS kunt opnemen: gewone afbeeldingen en verlopen.
Afbeeldingen
Het gebruik van een afbeelding op een achtergrond is vrij eenvoudig:
body ( background: url(sweettexture.jpg.webp); )Met de url()waarde kunt u een bestandspad naar elke afbeelding opgeven en deze wordt weergegeven als de achtergrond voor dat element.
U kunt ook een gegevens-URI instellen voor het url(). Dat ziet er zo uit:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Deze techniek verwijdert één HTTP-verzoek, wat een goede zaak is. Maar er zijn een aantal nadelen, dus voordat u al uw afbeeldingen gaat vervangen, moet u rekening houden met alle voor- en nadelen van gegevens-URI's.
U kunt ook gebruiken background-imageom afbeeldingen te spriten, wat een andere handige methode is om HTTP-verzoeken te verminderen.
Verlopen
Een andere optie bij het gebruik van achtergronden is om de browser te vertellen een verloop te maken. Hier is een super-duper eenvoudig voorbeeld van een lineair verloop:
body ( background: linear-gradient(black, white); )U kunt ook radiale verlopen gebruiken:
body ( background: radial-gradient(circle, black, white); )Technisch gezien zijn verlopen gewoon een andere vorm van achtergrondafbeelding. Het verschil is dat de browser de afbeelding voor je maakt. Hier leest u hoe u ze schrijft: CSS3 Gradient Syntax
In het bovenstaande voorbeeld wordt slechts één verloop gebruikt, maar u kunt ook meerdere verlopen over elkaar heen leggen. Er zijn een aantal behoorlijk verbazingwekkende patronen die je met deze techniek kunt maken.
Een terugvalkleur instellen
Als een achtergrondafbeelding niet wordt geladen, of als uw verloopachtergrond wordt bekeken in een browser die geen verlopen ondersteunt, zoekt de browser naar een achtergrondkleur als reserve. U kunt uw reservekleur als volgt specificeren:
body ( background: url(sweettexture.jpg.webp) blue; )Meerdere achtergrondafbeeldingen
U kunt meerdere afbeeldingen of een combinatie van afbeeldingen en verlopen als achtergrond gebruiken. Meerdere achtergrondafbeeldingen worden nu goed ondersteund (alle moderne browsers en IE9 + voor grafische afbeeldingen, IE10 + voor verlopen).
Wanneer u meerdere achtergrondafbeeldingen gebruikt, moet u er rekening mee houden dat er een enigszins contra-intuïtieve stapelvolgorde is. Maak een lijst van de afbeelding die als eerste vooraan moet staan en de afbeelding die als laatste achteraan moet staan, als volgt:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Als u meerdere achtergrondafbeeldingen gebruikt, moet u vaak meer waarden voor de achtergrond instellen om alles op de juiste plaats te krijgen. Als u de backgroundafkorting wilt gebruiken , kunt u de waarden voor elke afbeelding afzonderlijk instellen. Uw steno ziet er ongeveer zo uit (let op de komma die de eerste afbeelding en zijn waarden scheidt van de tweede afbeelding en zijn waarden):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Er is geen limiet aan het aantal achtergrondafbeeldingen dat u kunt instellen, en u kunt coole dingen doen, zoals uw achtergrondafbeeldingen animeren. Er is een goed voorbeeld van meerdere achtergrondafbeeldingen met animatie op de blog van David Walsh.
Demo
Zie de Pen-achtergrondafbeelding van CSS-Tricks (@ css-tricks) op CodePen.
Verwant
- achtergrond-bijlage
- achtergrond-clip
- Achtergrond kleur
- achtergrond-oorsprong
- achtergrond-positie
- achtergrond herhaling
- achtergrondgrootte
Meer middelen
- De CSS3-specificatie
- MDN
- Perfecte achtergrondafbeeldingen op volledige pagina
- CSS-verlopen beheersen (Slidedeck)
Browser-ondersteuning
Gewone afbeeldingen werken overal, en meerdere afbeeldingen werken in moderne browsers en IE9 +. Hier is de ondersteuning voor verlopen:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |