מה זה background-size?

המאפיין background-size ב-CSS משמש לקביעת גודל תמונת הרקע בתוך האלמנט. ניתן לקבוע את הגודל בפיקסלים, אחוזים, או במונחים יחסיים כמו 'cover' (כיסוי מלא של האלמנט) ו-'contain' (התאמה לשטח הפנוי של האלמנט).

שימוש במאפיין background-size

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

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

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

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

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

באמצעות background-size ניתן לשלוט באופן הצגת התמונה באלמנט, ובכך להשפיע על עיצוב הדף באופן כללי. ניתן לשלב עם background-position כדי למקם את התמונה בדיוק במקום הרצוי.

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