מה זה background-position?

המאפיין background-position ב-CSS משמש לקביעת מיקום תמונת הרקע בתוך האלמנט. המיקום יכול להיקבע במונחים יחסיים (למשל 'center', 'top left') או במונחים אבסולוטיים כמו פיקסלים ואחוזים.

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

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

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

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

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

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

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

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