Stijl achtergrond Eigenschap
Voorbeeld
Stijl de achtergrond van een document:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De achtergrondeigenschap stelt maximaal acht afzonderlijke achtergrondeigenschappen in of retourneert deze in verkorte vorm.
Met deze eigenschap kunt u een of meer van de volgende zaken instellen/retourneren (in willekeurige volgorde):
- Achtergrond kleur
- achtergrond afbeelding
- achtergrond herhaling
- achtergrond-bijlage
- achtergrondpositie
- achtergrondformaat
- achtergrond-oorsprong
- achtergrond-clip
Bovenstaande eigenschappen kunnen ook met aparte stijleigenschappen worden ingesteld. Het gebruik van aparte eigenschappen wordt ten zeerste aanbevolen voor niet-gevorderde auteurs voor een betere beheersbaarheid.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Opmerking: zie de individuele browserondersteuning voor elke waarde hieronder.
Syntaxis
Retourneer de achtergrondeigenschap:
object.style.background
Stel de achtergrondeigenschap in:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Eigendomswaarden
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technische details
| Standaardwaarde: | transparant geen herhaal scrollen 0% 0% auto padding-box border-box |
|---|---|
| Winstwaarde: | Een tekenreeks, die de achtergrond van een element vertegenwoordigt |
| CSS-versie | CSS1 + nieuwe eigenschappen in CSS3 |
Meer voorbeelden
Voorbeeld
De achtergrond van een DIV-element wijzigen:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Voorbeeld
Stel een achtergrondkleur in voor een document:
document.body.style.backgroundColor = "red";
Voorbeeld
Stel een achtergrondafbeelding in voor een document:
document.body.style.backgroundImage = "url('img_tree.png')";
Voorbeeld
Stel een achtergrondafbeelding in op no-repeat:
document.body.style.backgroundRepeat = "repeat-y";
Voorbeeld
Stel de achtergrondafbeelding in om vast te staan (scrollt niet):
document.body.style.backgroundAttachment = "fixed";
Voorbeeld
Verander de positie van een achtergrond-afbeelding:
document.body.style.backgroundPosition = "top right";
Voorbeeld
Retourneer de achtergrondeigenschapswaarden van een document:
document.body.style.background;
Gerelateerde pagina's
CSS-zelfstudie: CSS-achtergrond
CSS3-zelfstudie: CSS3-achtergronden
CSS-referentie: achtergrondeigenschap