Style background ιδιότητα

Ορισμός και χρήση

background Η ιδιότητα ρυθμίζεται ή επιστρέφεται με σύντομο τρόπο για το μέγιστο οκτώ ξεχωριστές ιδιότητες φόντου.

μέσω αυτής της ιδιότητας, μπορείτε να ρυθμίσετε/επιστρέψετε το εξής ένα ή περισσότερα (συμμόρφως με οποιαδήποτε σειρά):

DOM ιδιότητα CSS ιδιότητα
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Οι παραπάνω ιδιότητες μπορούν επίσης να ρυθμιστούν με διαφορετικές ιδιότητες στυλ. Συνιστάται ιδιαίτερα στους μη προχωρημένους συγγραφείς να χρησιμοποιούν διαφορετικές ιδιότητες για καλύτερη ελέγχου.

Δείτε επίσης:

Εκμάθηση CSS3CSS Background

Εκμάθηση CSS3Παρασκήνιο CSS3

Χειροκίνητο εγχειρίδιο CSS:Ιδιότητα background

Παράδειγμα

Ρυθμίστε το στυλ του παρασκηνίου του έγγραφου:

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

Δοκιμάστε το شخصικά

Υπάρχει περισσότερες παραδείξεις TIY στο κάτω μέρος της σελίδας.

Γραμματική

Επιστρέφει την ιδιότητα background:

object.style.background

Ρυθμίστε την ιδιότητα background:

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

Τιμή ιδιότητας

Τιμή Περιγραφή
color Ρυθμίστε τον χρώμα του παρασκηνίου του στοιχείου.
image Ρυθμίστε την εικόνα του παρασκηνίου του στοιχείου.
repeat Ρυθμίστε τον τρόπο επανάληψης της εικόνας του παρασκηνίου.
attachment Ρυθμίστε αν η εικόνα του παρασκηνίου είναι σταθερή ή κινείται με τη σελίδα.
position Ρυθμίστε την αρχική τοποθεσία της εικόνας του παρασκηνίου.
size Ρυθμίστε το μέγεθος της εικόνας του παρασκηνίου.
origin Ρυθμίστε το πεδίο τοποθέτησης του παρασκηνίου.
clip Ρυθμίστε το πεδίο ζωγραφικής της εικόνας του παρασκηνίου.
initial Ρυθμίστε αυτή την ιδιότητα στη προεπιλεγμένη της τιμή. Εξετάστε initial.
inherit Εκτελεί τη μεταφορά αυτής της ιδιότητας από το γονικό στοιχείο. Εξετάστε inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: transparent none repeat scroll 0% 0% auto padding-box border-box
Αποτελεσμα: Σtring, που εκφράζει το παρασκήνιο του στοιχείου.
Έκδοση CSS: CSS1 + νέες ιδιότητες στο CSS3

Περισσότερες παραδείξεις

Παράδειγμα 2

Αλλαγή του παρασκηνίου του στοιχείου DIV:

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

Δοκιμάστε το شخصικά

Παράδειγμα 3

Θέτει τη χρώμα του φόντου του έγγραφου:

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

Δοκιμάστε το شخصικά

Παράδειγμα 4

Θέτει την εικόνα του φόντου του έγγραφου:

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

Δοκιμάστε το شخصικά

Παράδειγμα 5

Θέτει την εικόνα του φόντου σε μη επαναλαμβανόμενη:

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

Δοκιμάστε το شخصικά

Παράδειγμα 6

Θέτει την εικόνα του φόντου σε σταθερή (δεν κινείται):

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

Δοκιμάστε το شخصικά

Παράδειγμα 7

Αλλάζει τη θέση της εικόνας του φόντου:

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

Δοκιμάστε το شخصικά

Παράδειγμα 8

Επιστρέφει τη τιμή της ιδιότητας του φόντου του έγγραφου:

document.body.style.background;

Δοκιμάστε το شخصικά

Υποστήριξη περιηγητών

background Είναι χαρακτηριστικό του CSS1 (1996).

Όλοι οι περιηγητές υποστηρίζουν το κείμενο:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Σχόλια

Το CSS3 (1999) προσέθεσε τρεις νέες ιδιότητες: