מאפיין background-image

מאפיין background-image קובע תמונת רקע אחת או יותר עבור תיבת האלמנט. אפשר לציין מספר תמונות מופרדות בפסיק — התמונה הראשונה תצויר מעל השאר. ערכים תקפים כוללים <image> (URL, gradient, וכו') וכן none עבור שכבה ריקה.

.hero { background-image: url('hero.jpg'); }

.stacked { background-image: linear-gradient(180deg, rgb(0 0 0 / 0.6), transparent), url('photo.jpg'); }

noneאין תמונת רקע בשכבה זו — היא עדיין נספרת כשכבה, אך לא מצוירת.

url()מצביע על משאב תמונה לפי כתובת. תחביר: url("path/to/image.png").

linear-gradient()מעבר צבעים ליניארי לאורך ציר.

radial-gradient()מעבר צבעים רדיאלי סביב נקודת מרכז.

conic-gradient()מעבר צבעים קוני (סובב סביב נקודה).

repeating-linear-gradient()מעבר ליניארי החוזר על עצמו.

repeating-radial-gradient()מעבר רדיאלי החוזר על עצמו.

repeating-conic-gradient()מעבר קוני החוזר על עצמו.

image-set()בחירת תמונה מתוך קבוצה לפי רזולוציה/פורמט.

cross-fade()מיזוג שתי תמונות עם אחוז עוצמה.