אם אתה משתמש ב multiple backgrounds אתה יכול להגדיר לכל אחד background-origin שונה בדיוק באותה צורה שאתה מגדיר להם את שאר המאפיינים.

לא רע... לא ידעתי את זה. קביל! . לא פתרון אולטימטיבי אבל מתקרב לשם.

הבעיה שנותרה היא בעיקר הפדינג המיותר אבל אפשר אולי לעבוד עם זה. היה נחמד אם היה אפשר להוסיף את הפדניג הנחוץ לרקע עצמו במקום לקונטינר.

אני מנסה עכשיו להשתמש ב box-sizing: border-box; כדי להכניס את הפדינג פנימה, אבל זה לא עובד כמצופה עם overflow hidden.

אני אצתרך להתעסק עם זה קצת כנראה...

בשביל זה אתה צריך להגדיר box-sizing:padding-box

רק שים לב שבפיירפוקס וכרום צריך להוסיף לו קידומת -moz- או -webkit- בהתאמה.

(עריכה: ראיתי שכתבת שניסית)

אגב, קראתי קצת בspec של CSS3 והסתבר שמה שאתה רוצה בעצם קיים בתקן, וכותבים אותו ככה:

background-position:bottom 10px left 0px

או פשוט יותר

background-position-y:bottom 10px

הבעיה היא שפיירפוקס וכרום לא תומכים בזה עדיין, אלא רק (תאמין או לא) אינטרנט אקספלורר (9 ומעלה, נראה לי). למרבה המזל אמרת שלא אכפת לך באיזה דפדפן זה עובד, נכון?

אכן, מצאת את מה שביקשתי, תודה רבה, תגובותיך עזרו מאוד , חבל רק שזה לא פיתרון ישומי יותר.

כבר ניסתי את הסינטקס הזה מלפנים בפיירפוקס אך הוא לא עבד לי, בכרום הוא גם לא עובד (גם בבטא).

IE9 באמת הפתיע וזה עובד באופן שקיוותי - super simple. תוכל להביא הפניה למקור שקראת? אני מעוניין לעיין בו.

box-sizing צריך גובה מוגדר על מנת לעבוד, אז זה מפיל את האופציה הזאת. עדיין שימוש ב background-origin יכול להיות לו אפליקציה במקרים מסויימים להשגת התוצאה המבוקשת, אם כי זה מתסבך את העניין קצת מעבר לנדרש.

אבקש שתעדכנו כאן במידה וימצא פתרון בדומה ל-I9 שנתמך בכל הדפדפנים העדכניים.

המקור שקראתי בו הוא האתר של הW3C שמגדיר את התקן. ספציפית העמוד הזה:

http://www.w3.org/TR/css3-background/#background-position

לא כתוב שם איזה דפדפנים תומכים, את זה בדקתי בעצמי. (אגב, יהיה הוגן לציין שגם אופרה תומך בזה)

אחלה פיצ'ר.

ד"א זאת לא הפעם הראשונה שמיקרוסופט מקדימים את כולם (font-face לדוגמא).

font-face היה חלק מcss2 כשהכניסו אותו לIE, אבל ירד מהתקן בCSS2.1, ולכן הדפדפנים שבאו אחר כך לא טרחו ליישם אותו. בCSS3 הכניסו אותו שוב לתקן (עם שינויים קלים) ושאר הדפדפנים מיהרו ליישם אותו גם.

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

כמובן שיש גם מקרים שIE באמת הקדים את המתחרים ביישום התקן (כמו במקרה הזה), אבל אין יותר מדי מהם, ובדרך כלל לא מדובר בדברים משמעותיים מדי.

אתה לא מדבר עם חובב IE, לא מכיר מישהו בתחום שהוא כן.

אבל בכל זאת צריך לתת להם קרדיט כשמגיע.

נראה לי שאני מתחיל להיות מושפע משכן שלי, מתכנת .NET שיש לו וינדוז אפילו בנייד .