מיקום תמונת רקע הוא יתרון מאוד גדול שיש לcss. לפני קריאת המדריך הזה כמובן חייבים לקרוא קודם את המדריך יצירת רקע מיקום רקע הוא כמובן רק לתמונות, ובדרך כלל גם שלא השתכפלו (background-repeat:no-repeat).
את הרקע ממקמים באמצעות התכונה background-position היא יכולה לקבל ערכים כמו: top bottom וcenter וגם מרחק מפינה מסוימת באמצעות פיקסלים או אחוזים.
נתחיל קודם עם השיטה השנייה (ללא אחוזים או פיקסלים). בדרך כלל כותבים תמיד שתי מילים, למשל:
Top center
Bottom left
המילה הראשונה רובעת את המירכוז האנכי יש שלושה מילים קיימות בשבילה:
top- הרקע יתמקם בחלק העליון של הדף.
bottom- הרקע יתמקם בחלק התחתון של הדף.
center- הרקע יתמקם בחלק האמצעי של הדף.
המילה השנייה יכולה להיות אחת מהמילים הבאות:
right- הרקע יתמקם בחלק הימני של הדף.
left- הרקע יתמקם בחלק השמאלי של הדף.
center- הרקע יתמקם בחלק האמצעי של הדף.
center center - הרקע יתמקם גם באמצע מבחינה אופקית וגם מבחינה אנכית.
bottom center - הרקע יתמקם באמצע החלק התחתון של הדף.
center left - הרקע יתמקם בצד השמאלי ובאמצע הדף מבחינה אנכית.
bottom left - הרקע יתמקם בחלק השמאלי של תחתית הדף.
כמו שהזכרנו קודם, אפשר למקם את הרקע בעזרת אחוזים או פיקסלים. עושים זאת בדיוק עם אותה תכונה. המספר הראשון שכותבים, הוא המרחק מהחלק השמאלי של הדף. אם רוצים להגדיר כאחוזים כותבים את המספר ולידו %, אם רוצים להשתמש בפיקסלים כותבים px. המספר השני קובע את המרחק מהחלק העליון של הדף. גם כאן ניתן להגדיר בפיקסלים או אחוזים.
53% 8% - הרקע יתמקם במרחק 53 אחוזים מהחלק השמאלי ובמרחק 8 אחוזים מהחלק העליון.
20px 42px - הרקע יתמקם במרחק של 20 פיקסלים מהחלק השמאלי ובמקחק 42 פיקסלים מהחלק העליון.
את הרקע ממקמים באמצעות התכונה background-position היא יכולה לקבל ערכים כמו: top bottom וcenter וגם מרחק מפינה מסוימת באמצעות פיקסלים או אחוזים.
נתחיל קודם עם השיטה השנייה (ללא אחוזים או פיקסלים). בדרך כלל כותבים תמיד שתי מילים, למשל:
Top center
Bottom left
המילה הראשונה רובעת את המירכוז האנכי יש שלושה מילים קיימות בשבילה:
top- הרקע יתמקם בחלק העליון של הדף.
bottom- הרקע יתמקם בחלק התחתון של הדף.
center- הרקע יתמקם בחלק האמצעי של הדף.
המילה השנייה יכולה להיות אחת מהמילים הבאות:
right- הרקע יתמקם בחלק הימני של הדף.
left- הרקע יתמקם בחלק השמאלי של הדף.
center- הרקע יתמקם בחלק האמצעי של הדף.
דוגמאות
top left - הרקע יתמקם בפינה העליונה שנמצאת בצד שמאל.center center - הרקע יתמקם גם באמצע מבחינה אופקית וגם מבחינה אנכית.
bottom center - הרקע יתמקם באמצע החלק התחתון של הדף.
center left - הרקע יתמקם בצד השמאלי ובאמצע הדף מבחינה אנכית.
bottom left - הרקע יתמקם בחלק השמאלי של תחתית הדף.
כמו שהזכרנו קודם, אפשר למקם את הרקע בעזרת אחוזים או פיקסלים. עושים זאת בדיוק עם אותה תכונה. המספר הראשון שכותבים, הוא המרחק מהחלק השמאלי של הדף. אם רוצים להגדיר כאחוזים כותבים את המספר ולידו %, אם רוצים להשתמש בפיקסלים כותבים px. המספר השני קובע את המרחק מהחלק העליון של הדף. גם כאן ניתן להגדיר בפיקסלים או אחוזים.
דוגמאות
0% 0% - הרקע יתמקם בפינה השמאלית העליונה.53% 8% - הרקע יתמקם במרחק 53 אחוזים מהחלק השמאלי ובמרחק 8 אחוזים מהחלק העליון.
20px 42px - הרקע יתמקם במרחק של 20 פיקסלים מהחלק השמאלי ובמקחק 42 פיקסלים מהחלק העליון.
אודות האתר
האתר css-guide נוצר בשנת 2008 ונותן לכם מדריכי css לקריאה בחינם. בעזרת מדריכי האתר css-guide תוכלו ללמוד ולשפר את יכולתכם בשפה css שנועדה על מנת לעצב דפי אינטרנט בצורה טובה. גלישה נעימה, ולימוד css נעים.
חברת NSL המתמחה בתחום קידום אתרים
