Αστική Θέσης Περιβάλλοντος CSS

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

background-position Η ιδιότητα ορίζει τη θέση εκκίνησης της εικόνας φόντου.

Αυτή η ιδιότητα ορίζει την αρχική εικόνα φόντου (από background-image Τοποθεσία ορισμού) της εικόνας φόντου, αν η εικόνα φόντου πρέπει να επαναληφθεί, θα ξεκινήσει από αυτό το σημείο.

Σημείωση:Σημείωση: πρέπει να ρυθμίσετε την ιδιότητα background-attachment στο "fixedπρέπει να ρυθμίσετε την ιδιότητα background-attachment στο "

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

Εκμάθηση CSSCSS background

Εγχειρίδιο CSSΙδιότητα background-image

Εγχειρίδιο HTML DOMΙδιότητα backgroundPosition

Παράδειγμα

Πώς να τοποθετήσετε την εικόνα φόντου:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Δοκιμάστε το προσωπικά

Γλώσσα σύνταξης CSS

background-position: τιμή;

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

Τιμή Περιγραφή
  • άνω αριστερά
  • άνω κέντρο
  • άνω δεξιά
  • κέντρο αριστερά
  • κέντρο κέντρο
  • κέντρο δεξιά
  • κάτω αριστερά
  • κάτω κέντρο
  • κάτω δεξιά

Αν καθορίσετε μόνο μια λέξη-κλειδί, η δεύτερη τιμή θα είναι "center".

Προεπιλεγμένη τιμή: 0% 0%.
x% y%

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη τιμή είναι η κάθετη θέση.

Το πάνω αριστερό σημείο είναι 0% 0%. Το κάτω δεξί σημείο είναι 100% 100%.

Αν καθορίσετε μόνο μια τιμή, η άλλη τιμή θα είναι 50%.
xpos ypos

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη τιμή είναι η κάθετη θέση.

Το πάνω αριστερό σημείο είναι 0 0. Οι μονάδες είναι pixel (0px 0px) ή οποιαδήποτε άλλη μονάδα CSS.

Αν καθορίσετε μόνο μια τιμή, η άλλη τιμή θα είναι 50%.

Μπορείτε να συνδυάσετε το % και τις τιμές position.

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

Προεπιλεγμένη τιμή: 0% 0%
Εναπόληψη: no
Έκδοση: CSS1
Γλώσσα σύνταξης JavaScript: object.style.backgroundPosition="center"

Περισσότερα παραδείγματα

Πώς να χρησιμοποιήσετε το % για να τοποθετήσετε την εικόνα φόντου
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε το percent για να τοποθετήσετε την εικόνα φόντου στη σελίδα.
Πώς να χρησιμοποιήσετε τα pixel για να τοποθετήσετε την εικόνα φόντου
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε τα pixel για να τοποθετήσετε την εικόνα φόντου στη σελίδα.

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στην τаблицή δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Chrome Edge Firefox Safari Όπερα
Chrome IE / Edge Firefox Safari Όπερα
1.0 4.0 1.0 1.0 3.5