מה זה background?

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

מבנה מאפיין background

המאפיין background משלב מספר מאפיינים בודדים:

• צבע הרקע (background-color) - קובע את צבע הרקע של האלמנט.
• תמונת הרקע (background-image) - קובע תמונה שתשמש כרקע.
• מיקום הרקע (background-position) - קובע את מיקום תמונת הרקע בתוך האלמנט.
• גודל הרקע (background-size) - קובע את גודל תמונת הרקע ביחס לאלמנט.
• חזרת הרקע (background-repeat) - קובע אם ואיך תמונת הרקע תחזור על עצמה.
• חיבור הרקע (background-attachment) - קובע אם הרקע יזוז עם הדף או יישאר קבוע.
• מקור הרקע (background-origin) - קובע את מיקום התחלת הרקע ביחס לקופסת האלמנט.
• קליפ הרקע (background-clip) - קובע את האזור שבו יופיע הרקע.

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

להלן דוגמה לשימוש במאפיין background המשלב צבע ותמונת רקע:

          
            
          <div style="background: url('example.jpg') no-repeat center center/cover, #ffcc00; width: 200px; height: 200px;"></div>
          

          

בדוגמה זו, הרקע משלב תמונת רקע ממוקמת במרכז האלמנט, מכסה את כל האלמנט, ולצידה מוגדר צבע רקע צהוב.

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

המאפיין background הוא רב תכליתי ומאפשר שילוב של מספר תמונות רקע, יצירת גרדיאנטים מורכבים, ושימוש בטכניקות מתקדמות ליצירת אפקטים ויזואליים מרהיבים.

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

    <div style="background: url('https://via.placeholder.com/150') no-repeat center center/cover, #ffcc00; width: 200px; height: 200px;"></div>