Ιδιότητα background-position-y
Η ιδιότητα background-position-y ορίζει
την κατακόρυφη θέση της εικόνας φόντου ενός στοιχείου.
Η ιδιότητα μπορεί να πάρει τις ακόλουθες τιμές:
top, center, bottom, καθώς και
να οριστεί η θέση του φόντου σε ποσοστά
ή pixel.
Σύνταξη
επιλογέας {
background-position-y: τιμή;
}
Παράδειγμα
Ας τοποθετήσουμε την εικόνα φόντου στην κορυφή κατακόρυφα:
<div id="elem"></div>
#elem {
background-position-y: top;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Παράδειγμα
Τώρα ας μετακινήσουμε το φόντο στο κέντρο:
<div id="elem"></div>
#elem {
background-position-y: 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-y: 80%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Δείτε επίσης
-
η ιδιότητα
background,
που είναι μια συντόμευση για το φόντο -
η ιδιότητα
background-position-x,
που ορίζει την οριζόντια θέση του φόντου