HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML-video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

HTML agtergrond beelde


'n Agtergrondprent kan vir byna enige HTML-element gespesifiseer word.


Agtergrondprent op 'n HTML-element

Om 'n agtergrondprent op 'n HTML-element by te voeg, gebruik die HTML- stylekenmerk en die CSS - background-imageeienskap:

Voorbeeld

Voeg 'n agtergrondprent op 'n HTML-element by:

<div style="background-image: url('img_girl.jpg');">

U kan ook die agtergrondprent in die <style> element spesifiseer, in die <head> afdeling:

Voorbeeld

Spesifiseer die agtergrondprent in die <style> element:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

Agtergrondprent op 'n bladsy

As jy wil hê dat die hele bladsy 'n agtergrondprent moet hê, moet jy die agtergrondprent op die <body>element spesifiseer:

Voorbeeld

Voeg 'n agtergrondprent vir die hele bladsy by:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

Agtergrond Herhaal

As die agtergrondprent kleiner as die element is, sal die prent homself horisontaal en vertikaal herhaal totdat dit die einde van die element bereik:

Voorbeeld

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

Om te verhoed dat die agtergrondprent homself herhaal, stel die background-repeateiendom op no-repeat.

Voorbeeld

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

Agtergrond Omslag

As jy wil hê dat die agtergrondprent die hele element moet bedek, kan jy die background-sizeeiendom instel opcover.

Om seker te maak dat die hele element altyd gedek is, stel die background-attachmenteiendom ook opfixed:

Op hierdie manier sal die agtergrondprent die hele element bedek, sonder om te strek (die prent sal sy oorspronklike proporsies behou):

Voorbeeld

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Agtergrondrek

As jy wil hê dat die agtergrondprent moet strek om die hele element te pas, kan jy die background-sizeeiendom stel op 100% 100%:

Probeer die grootte van die blaaiervenster verander, en jy sal sien dat die prent sal strek, maar altyd die hele element dek.

Voorbeeld

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Kom meer te wete CSS

Uit die voorbeelde hierbo het jy geleer dat agtergrondprente gestileer kan word deur die CSS-agtergrondeienskappe te gebruik.

Om meer te wete te kom oor CSS-agtergrondeienskappe, bestudeer ons CSS-agtergrondhandleiding .