Ιδιότητα background-size

Η ιδιότητα background-size ορίζει το μέγεθος της εικόνας φόντου. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες μεγέθους, ή οι λέξεις-κλειδιά auto, cover ή contain.

Σύνταξη

επιλογέας {
	background-size: τιμή;
}

Λέξεις-κλειδιά

Τιμή	Περιγραφή
`auto`	Το φόντο θα έχει το φυσικό του μέγεθος, όπως το πραγματικό μέγεθος της εικόνας φόντου. Εάν όμως το `auto` οριστεί μόνο για μια πλευρά, τότε σε αυτήν την πλευρά το φόντο θα κλιμακωθεί έτσι, ώστε να διατηρήσει τις αναλογίες του χωρίς παραμόρφωση.
`cover`	Κλιμακώνει την εικόνα έτσι, ώστε να καλύψει ολόκληρο το μπλοκ διατηρώντας τις αναλογίες. Η εικόνα θα προσπαθήσει να χωρέσει ολόκληρη, αλλά αυτό δεν θα τα καταφέρνει πάντα, επομένως κάποιο τμήμα της θα αποκοπεί. Το μπλοκ πάντα θα καλύπτεται εξ ολοκλήρου από την εικόνα.
`contain`	Κλιμακώνει την εικόνα έτσι, ώστε να χωρέσει ολόκληρη στο μπλοκ διατηρώντας τις αναλογίες. Σε αυτήν την περίπτωση μπορεί να καταλάβει είτε όλο το πλάτος, είτε όλο το ύψος (εξαρτάται από τις αναλογίες της εικόνας και από τις διαστάσεις του στοιχείου). Το μπλοκ σε γενικές γραμμές δεν θα καλυφθεί εξ ολοκλήρου από την εικόνα (αλλά η εικόνα πάντα θα είναι ορατή ολόκληρη, έστω και σε μικρογραφία).

Προεπιλεγμένη τιμή: auto.

Χρήση

Οι μονάδες μεγέθους και το auto μπορούν να χρησιμοποιηθούν σε διάφορους συνδυασμούς, για παράδειγμα, έτσι: auto 20px, ή 30% 20px, ή auto 30% και ούτω καθεξής. Σε αυτήν την περίπτωση η πρώτη παράμετρος ορίζει το μέγεθος του φόντου σε πλάτος, και η δεύτερη παράμετρος - το μέγεθος του φόντου σε ύψος. Εάν καθοριστεί μία παράμετρος - τότε αυτή θα ορίζει το μέγεθος του φόντου ταυτόχρονα και σε πλάτος, και σε ύψος.

Παράδειγμα

Τώρα η εικόνα φόντου θα έχει το φυσικό της μέγεθος:

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

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

Παράδειγμα

Τώρα η εικόνα φόντου θα έχει μέγεθος 300px επί 400px (στην περίπτωσή μας οι αναλογίες της εικόνας θα παραμορφωθούν):

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

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

Παράδειγμα

Τώρα η εικόνα φόντου θα έχει μέγεθος 400px επί 400px (στην περίπτωσή μας οι αναλογίες της εικόνας θα παραμορφωθούν):

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

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

Παράδειγμα

Τώρα η εικόνα φόντου θα έχει μέγεθος 400px οριζόντια, και κατακόρυφα το μέγεθός της θα προσαρμοστεί έτσι, ώστε οι αναλογίες να μην παραμορφωθούν:

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

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

Παράδειγμα

Τώρα η εικόνα φόντου θα έχει μέγεθος 400px κατακόρυφα, και οριζόντια το μέγεθός της θα προσαρμοστεί έτσι, ώστε οι αναλογίες να μην παραμορφωθούν:

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

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

Παράδειγμα . Τιμή contain

Δείτε πώς λειτουργεί η τιμή contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Παράδειγμα . Τιμή cover

Δείτε πώς λειτουργεί η τιμή cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Παράδειγμα . Βελτιώνουμε τη λειτουργία του cover

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

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Δείτε επίσης

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