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

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

הערכים יכולים להיות המילים left או right, מספרים המציינים מספר פיקסלים או אחוזים, למשל:

/* קריאה לתמונה */
background-image: url(images/logo-bg.png);
/* מיקום התמונה במספר צורות כתיבה שכולן יתנו את אותה תוצאה */
background-position: left top;
background-position: 0px 0px;
background-position: 0% 0%;

צורה נוספת של רישום (שהיא הנפוצה), תהיה הרישום "החסכוני", בה המיקומים ירשמו בצמוד ובשורת הקריאה לתמונה:

background: url(images/logo-bg.png) left top;
background: url(images/logo-bg.png) 0px 0px;
background: url(images/logo-bg.png) 0% 0%;

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

לכן אם המרחק הוא 0px התמונה למעשה צמודה לגבול השמאלי ולכן background-position: 0px יהיה כמו לכתוב background-position: left.

הפיכת המיקומים

במקרים בהם רשום background-position: left או background-position: right כבר טיפלנו בשלב בו החלפנו בין המילים left ו-rigth.

לכן, בשלב זה יש לעבור על קובץ ה-CSS ולחפש את כל הפקודות המכילות מיקום בפיקסלים עבור תמונות. בכל מקום בו רשום 0 יש להחליף זאת ל-right. למשל:

background: url(images/icon.gif) no-repeat 0 5px;
יש להחליף ל:
background: url(images/icon.gif) no-repeat right 5px;

אך מה לעשות כאשר המיקום הוא במספר פיקסלים ולא באפס? הרי 3px יציין מרחק של שלושה פיקסלים מהגבול השמאלי, אך כיוון שהדפדפן מרנדר ("מצייר" על גבי המסך) את האתר משמאל לימין, הוא רק יודע היכן האתר "מתחיל" אך לא יודע היכן הוא "נגמר" לכן לא קיימת פקודה שמגדירה מרחק מהגבול הימני.

הדרך להתמודד עם מצב זה תהיה באמצעות ערכים באחוזים.
ניתן להגדיר את המרחק מהגבול השמאלי באחוזים, כך שאם המרחק מהגבול השמאלי הוא 0% התמונה למעשה תהיה צמודה לגבול השמאלי. מכך, שאם המרחק מהגבול השמאלי הוא 100%, התמונה תהיה צמודה לגבול הימני.

אם הוגדר מרחק של 10px מהגבול השמאלי, ניתן בגסות להעריך שאם נתרחק כ-99% מרוחבו של האתר מהגבול השמאלי, ייווצר מרחק של 10px מהגבול הימני. כלומר:

background-position: 12px 2px;
בעת תרגום התבנית, יקבל את הערך
background-position: 99% 2px;

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

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

כאשר לא מצויין מיקום לתמונת רקע

במקרים רבים לא מוגדר מיקום לתמונת רקע, למשל כך:

background: url(images/body_bg.gif) no-repeat;

אם לא צוין מיקום, המיקום יהיה ברירת מחדל left. יוצא כך שברוב המקרים זה לא משפיע על מראה התבנית בעת התרגום, אך רצוי להוסיף right או 100% (הצמדה לגבול הימני) לתמונות רקע להן לא צוין מיקום, כיוון שפעמים רבות כן יכולה להיווצר בעיה בעיצוב.

• השיעור הקודם: הפיכת תמונות
• השיעור הבא: ערכים מספריים המייצגים כיוונים