Ιδιότητα background-position

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

Μπορεί επίσης να οριστεί η θέση με λέξεις-κλειδιά. Σε αυτή την περίπτωση η σειρά των τιμών δεν έχει σημασία. Λέξεις-κλειδιά για την κάθετη: top, center, bottom. Λέξεις-κλειδιά για την οριζόντια: left, center, right.

Πώς να χρησιμοποιείτε τις λέξεις-κλειδιά

Για να τοποθετήσετε μια εικόνα με λέξη-κλειδί, πρέπει να ορίσετε μια τιμή για την κάθετη και μια για την οριζόντια. Για παράδειγμα, εάν ορίσετε την τιμή top right, τότε η εικόνα θα τοποθετηθεί πάνω δεξιά.

Η σειρά των λέξεων δεν έχει σημασία: μπορείτε να γράψετε top right, ή μπορείτε - right top. Εάν υπάρχει η λέξη-κλειδί center - μπορεί να παραλειφθεί. Για παράδειγμα, το top center, είναι το ίδιο με απλώς top. Και το center center είναι το ίδιο με απλώς center.

Σύνταξη

επιλογέας {
	background-position: δύο τιμές διαχωρισμένες με κενό;
}

Παράδειγμα

Από προεπιλογή η εικόνα φόντου θα βρίσκεται στην επάνω αριστερή γωνία:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου στην επάνω δεξιά γωνία:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου στην κάτω δεξιά γωνία:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου δεξιά και στο κέντρο κάθετα:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου στο κέντρο του μπλοκ:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου σε απόσταση 20px από αριστερά και 40px από πάνω:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου σε απόσταση 90% από αριστερά και 100% από πάνω:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου σε απόσταση 30px από αριστερά και από κάτω κάθετα:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου σε απόσταση 30px από αριστερά και στο κέντρο κάθετα:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου σε απόσταση 30px από πάνω και στο κέντρο οριζόντια:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Δείτε επίσης

η ιδιότητα background,
που αντιπροσωπεύει μια συντόμευση ιδιότητας για το φόντο