מוקדם יותר השנה, עדכנו את ההתנהגות של מאפיין הקיצור background ב-CSS. בעקבות השינוי הזה, נכס הקיצור background יאפס את background-size לערך ברירת המחדל שלו, auto auto, אם הוא לא מוגדר בהצהרת הקיצור. השינוי הזה מביא את Chrome ודפדפני WebKit אחרים לתאימות למפרט, ומתאים להתנהגות של Firefox, Opera ו-Internet Explorer.
בגלל ש-Chrome ל-Android עובר לגרסאות הנוכחיות של WebKit, השינוי הזה זמין עכשיו ב-Android. מאחר שמדובר בתיקון ל-WebKit, סביר להניח שאתרים שנבדקו בכמה דפדפנים לא מושפעים מכך.
הדרך הישנה לעשות דברים
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
מאפיין הקיצור background לא מכיל מאפיין גודל, ולכן הוא יגרום לאיפוס של background-size לערך ברירת המחדל שלו, auto auto.
הדרך הנכונה לציין את גודל התמונה
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
ב-fooB, כדי לציין background-size בקיצור הדרך background, צריך לציין קודם את position (0%), ואז קו נטוי לפנים ואז את background-size (50px 40px).
תיקונים לקוד קיים
יש כמה אפשרויות לפתרון הבעיה הזו בקלות:
- משתמשים ב-
background-imageבמקום במאפיין המקוצרbackground. - מגדירים את
background-sizeבסוף, עם ספציפיות גבוהה יותר מכל כללי ה-CSS האחרים שמגדירים אתbackgroundבאותו רכיב, ולא שוכחים לבדוק את הכללים של:hover. - מחילים את המאפיין
!importantעלbackground-size. - מעבירים את פרטי הגודל למאפיין המקוצר
background.
בונוס: הזזת תמונות רקע
בנוסף לשינוי הזה, יש עכשיו גמישות רבה יותר במיקום התמונה ברקע. בעבר, אפשר היה לציין רק את מיקום התמונה ביחס לפינה השמאלית העליונה. עכשיו אפשר לציין את ההזזה מהקצוות של המאגר. לדוגמה, אם מגדירים את הערך background-position: right 5px bottom 5px;, התמונה תהיה ממוקמת 5 פיקסלים מהקצה הימני ו-5 פיקסלים מהקצה התחתון. דוגמה ב-JSBin