מה זה background-repeat?

המאפיין background-repeat ב-CSS קובע אם ואיך תמונת הרקע תחזור על עצמה. המאפיין תומך בערכים כמו 'repeat' (חזרה בכל הכיוונים), 'repeat-x' (חזרה אופקית בלבד), 'repeat-y' (חזרה אנכית בלבד), ו-'no-repeat' (אין חזרה).

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

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

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

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

בדוגמה זו, תמונת הרקע לא חוזרת על עצמה ונשארת במקום אחד בלבד.

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

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

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