מוקדם יותר השנה, WebKit עדכנה את ההתנהגות של מאפיין קיצור הדרך 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