Πώς να δημιουργήσετε: Πλήρης εικόνα σελίδας

Μάθετε πώς να δημιουργήσετε μια πλήρη σελίδα φόντο εικόνα χρησιμοποιώντας CSS.

Πλήρης εικόνα σελίδας

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

Παρουσίαση - Εικόνα φόντου πλήρης σελίδας

Παρουσίαση - Εικόνα φόντου μισής σελίδας

Πώς να δημιουργήσετε μια πλήρη ύψος εικόνα

Χρησιμοποιήστε ένα στοιχείο κουτί και προσθέστε μια εικόνα φόντου 100% ύψους στο κουτί.

Συμβουλή：Χρησιμοποιώντας 50% μπορείτε να δημιουργήσετε μια εικόνα φόντου μισής σελίδας. Στη συνέχεια, χρησιμοποιήστε τις παρακάτω ιδιότητες φόντου για να κεντρώσετε και να κλιμακώσετε την εικόνα τέλεια:

Σημείωση：Για να διασφαλιστεί ότι η εικόνα καλύπτει ολόκληρη την οθόνη, πρέπει επίσης να ρυθμίσετε height: 100% απλώνεται επίσης στο <html> και <body>:

Πλήρης σελίδα φόντο εικόνα：

body, html {
  height: 100%;
{}
.bg {
  /* Το χρησιμοποιούμενο εικόνα */
  background-image: url("dancer.jpg");
  /* Πλήρης ύψος */
  height: 100%;
  /* Καλώς ορισμένα στο κέντρο και κλιμακωμένα τα εικόνες */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
{}

Try it yourself

Half-page background image:

.bg {
    height: 50%;
{}

Try it yourself