Stijl achtergrond eigenschap

Definitie en gebruik

Background Eigenschappen worden ingesteld of teruggegeven in verkorte vorm en kunnen maximaal acht afzonderlijke achtergrondeigenschappen bevatten.

Via deze eigenschap kunt u het volgende item of meerdere items instellen/teruggeven (in willekeurige volgorde):

DOM-eigenschap CSS-eigenschap
backgroundAttachment achtergrondbevestiging
achtergrondklip background-clip
achtergrondkleur achtergrondkleur
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Deze eigenschappen kunnen ook worden ingesteld met afzonderlijke stijleigenschappen. Het wordt sterk aanbevolen dat niet-geavanceerde auteurs afzonderlijke eigenschappen gebruiken voor betere controleerbaarheid.

Zie ook:

CSS Handleiding:CSS background

CSS3 Handleiding:CSS3 Achtergrond

CSS Referentie Handboek:background-eigenschap

Voorbeeld

Stel het stijlpatroon van de documentachtergrond in:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Probeer het zelf

Er zijn meer TIY-exempelen onder op de pagina.

Syntaxis

Retourneer de background-eigenschap:

object.style.background

Stel de background-eigenschap in:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Eigenschapswaarde

Waarde Beschrijving
color Stel de achtergrondkleur van het element in.
image Stel de achtergrondafbeelding van het element in.
repeat Stel de herhalingswijze van de achtergrondafbeelding in.
attachment Stel in of de achtergrondafbeelding vast is of mee scrollt met de pagina.
position Stel de startpositie van de achtergrondafbeelding in.
size Stel de grootte van de achtergrondafbeelding in.
origin Stel het positiegebied van de achtergrond in.
clip Stel het tekeningsgebied van de achtergrondafbeelding in.
initial Stel deze eigenschap in op zijn standaardwaarde. Zie ook initial.
inherit Inherit deze eigenschap van het ouder element. Zie ook inherit.

Technische details

Standaardwaarde: transparent none repeat scroll 0% 0% auto padding-box border-box
Retourwaarde: Een string die de achtergrond van het element aangeeft.
CSS-versie: CSS1 + nieuwe eigenschappen in CSS3

Meer voorbeelden

Voorbeeld 2

Wijzig de achtergrond van het DIV-element:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Probeer het zelf

Voorbeeld 3

Stel een achtergrondkleur in voor het document:

document.body.style.backgroundColor = "red";

Probeer het zelf

Voorbeeld 4

Stel een achtergrondbeeld in voor het document:

document.body.style.backgroundImage = "url('img_tree.png')";

Probeer het zelf

Voorbeeld 5

Stel het achtergrondbeeld in als niet herhalend:

document.body.style.backgroundRepeat = "repeat-y";

Probeer het zelf

Voorbeeld 6

Stel het achtergrondbeeld in als vast (niet scrollend):

document.body.style.backgroundAttachment = "fixed";

Probeer het zelf

Voorbeeld 7

Verander de positie van het achtergrondbeeld:

document.body.style.backgroundPosition = "top right";

Probeer het zelf

Voorbeeld 8

Geef de waarde van de achtergrondeigenschap van het document terug:

document.body.style.background;

Probeer het zelf

Browserondersteuning

Background Is een kenmerk van CSS1 (1996).

Alle browsers ondersteunen het volledig:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Opmerkingen

CSS3 (1999) voegde drie nieuwe eigenschappen toe: