מה זה background-image?

המאפיין background-image ב-CSS משמש להגדרת תמונת רקע לאלמנט HTML. ניתן להשתמש בתמונה מקומית, תמונה מהאינטרנט, או יצירת גרדיאנט כתחליף לתמונה.

מבנה מאפיין background-image

המאפיין background-image מקבל כתובת URL לתמונה או ערך של גרדיאנט. אפשר גם לשלב כמה תמונות או גרדיאנטים בתור רקעים מרובדים.

דוגמה לשימוש ב-background-image

להלן דוגמה לשימוש במאפיין background-image:

          

          <div style="background-image: url('https://via.placeholder.com/150'); width: 100px; height: 100px;"></div>
              
          

בדוגמה זו, תמונת רקע מוגדרת כ'placeholder image' ברוחב ובגובה של 100 פיקסלים.

שימושים מתקדמים

באמצעות background-image ניתן ליצור רקעים מורכבים על ידי שימוש בכמה שכבות רקע, שינוי המיקום והגודל שלהם, ויצירת אנימציות על הרקע. ניתן גם לשלב עם background-color כדי להוסיף שכבת צבע מתחת לתמונה.

    <div style="background-image: url('https://via.placeholder.com/150'); width: 100px; height: 100px;"></div>