HTML Background Image Code

Εδώ, έχουμε εφαρμόσει μια εικόνα φόντου σε ένα στοιχείο <div>.


<div style="background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/00akiw5.gif);padding:5px;width:150px;height:200px;border:1px solid black;"><p>See the background image?</p></div>




Εδώ, έχουμε δημιουργήσει την εικόνα φόντου στο υπόβαθρο-επαναλαμβάνω: δεν-επαναλαμβάνω. Αυτό αποτρέπει την εικόνα επαναλαμβάνοντας όλη την στοιχείου (στην περίπτωση που η εικόνα είναι μικρότερο από το στοιχείο). Μπορείτε επίσης να χρησιμοποιήσετε το επαναλαμβάνω-x και επαναλαμβάνω-y για να κάνει την επανάληψη υπόβαθρο μόνο οριζόντια ή κάθετα. Για περισσότερες πληροφορίες, δείτε το CSS υπόβαθρο-επαναλαμβάνω ιδιοκτησίας.


<div style="background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/00akiw5.gif);padding:5px;width:150px;height:200px;border:1px solid black;background-repeat:no-repeat;"><p>The background image doesn't repeat.</p></div>



Ο ακόλουθος κώδικας ορίζει μια εικόνα φόντου για το σύνολο της σελίδας (μέσω του «σώματος» ετικέτα). Θα τοποθετήσετε την εικόνα στο κέντρο της σελίδας και να το αποτρέψει από την επανάληψη σε όλη τη σελίδα.


body {
  background-image: url("http://yoursite.com/images/image_name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


Ακόμα καλύτερα, μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS υπόβαθρο για να ορίσετε όλες τις ιδιότητες φόντου σε μία φορά. Ως εκ τούτου, θα μπορούσαμε να ξαναγράψουμε την παραπάνω κώδικα σε αυτό:



body {  background: url("http://yoursite.com/images/image_name.gif") 50% 50% no-repeat;} 


ΠΗΓΗ
 

Κατηγορίες:
Σχόλια