הגדרת רקע כוללת מספר הגדרות נפרדות, שאותן ניתן לצמצם. נפרט על כל אחת בנפרד, ואז נראה את ההגדרה המצומצמת:
background-color – צבע רקע
בפשטות כאן ניתן להגדיר צבע. בדיוק כמו במקומות אחרים בCSS ניתן לקרוא לצבע באופנים שונים:
- בשמו (לדוגמה
white) - באמצעות RGB (לדוגמה
#cc2e72) - באמצעות RGAB – כלומר – צבע עם שקיפות. רושמים את זה כך:
rgba(204, 46, 114, 0.4)כאשר הפרמטר האחרון הוא הפרמטר של השקיפות. 1 = ללא שקיפות, 0 = שקיפות מלאה. transparent– ללא צבע. רקע שקוף.
background-image – תמונת רקע
כאן נגדיר את תמונת הרקע שלנו:
ניתן להשתמש בכתובת URL אבסולוטית:
background-image: url(https://chani-k.co.il/wp-content/uploads/2018/07/25388715424_65480dbf18_k.jpg);
או בכתובת רלטיבית – מיקום התמונה על השרת ביחס לקובץ הCSS. לדוגמה הCSS יושב בתיקיה css שלידה יש תיקיה בשם images ואנחנו רוצים את התמונה שנקראת myImage.jpg שבתיקיה images. במצב כזה נכתוב כך:
background-image: url(../images/myImage.jpg);
כפי שניתן לראות בדוגמה – יש לכתוב את הקישור בתוך סוגריים, כשלפניהן יש את המילה url. אפשר גם להכניס את הקישור לתוך מרכאות בתוך הסוגריים, איך אין חובה.
גם כאשר משתמשים ברקע גרדיאנט משתמשים בbackground image. אבל כל עניין הגרדיאנטים הוא סיפור נפרד.
כל ההגדרות הבאות רלוונטיות כאשר משתמשים בתמונת רקע. הן תעזורנה לנו לקבוע את מיקום, גודל וחזרת התמונה.
background-position – מיקום תמונת הרקע
בדרך כלל כשהתמונה לא בגודל שזהה לאלמנט שבו היא נמצאת נרצה לקבוע מה יהיה המיקום שלה ביחס לאלמנט. לדוגמה תמונה בגודל 100*100 פיקסל נמצאת בתוך DIV בגודל 100 גובה על 200 רוחב.
כברירת מחדל התמונה מתמקמת משמאל למעלה. הנקודה הזו נקראת 0,0. בכל מקרה תמיד מתייחסים למיקום האופקי ואחריו למיקום האנכי. מיד הסבר.
מיקום במילים:
ניתן ליישר אותה ימינה למעלה – background-position: right top, או ימינה למטה – right bottom וכן הלאה.
יש כמובן את האפשרות להגדיר אותה למרכז: center top – ימקם את התמונה למעלה, כשהיא ממורכזת אופקית, וכן על זו הדרך. center בלבד ימקם אותה למרכז גם אופקית וגם אנכית.
מיקום במספרים:
לפעמים נרצה למקם את התמונה X פיקסלים מאחד הצדדים. כאן קריטי איזה מספר כתוב ראשון. להלן מספר דוגמאות. שימו ♥ לסדר של המספרים:
background-position: 0 50px; // ממקם את התמונה צמודה לשמאל (0) ו50 פיקסלים מלמעלה. background-position: 40px 0; // ממקם את התמונה 40 פיקסלים משמאל, צמודה למעלה. background-poisition: 40px 50px // ממקם את התמונה 40 פיקסלים משמאל, 50 מלמעלה.
ומה קורה כשאנחנו רוצים למקם את התמונה לפי צד ימין/למטה? זה עובד כך:
background-posiiton: right 45px 0 // ממקם את התמונה 45 פיקסל מימין, צמודה למעלה. background-position: 0px bottom 40px; // ממקם את התמונה צמודה לשמאל, 40 פיקסלים מלמטה.
וכן הלאה. כפי שניתן לראות, אם מדובר במיקום לפי ימין או מטה – יש לכתוב את המילה ימין או מטה לפני המספר.
מיקום באחוזים:
ההגדרה מתבצעת באופן דומה לאיך שהיא מתבצעת בפיקסלים, אלא שכאן זה קצת מורכב.
בעוד ש20 פיקסלים משמאל הכוונה שהצד השמאלי של התמונה ממוקם 20 פיקסלים מהצד השמאלי של הקונטיינר שלה, באחוזים ההגדרה תזיז את התמונה ביחס לגודלה ולגודל האלמנט שעליו היא מוגדרת. לדוגמה 20% משמעו שהתמונה ממוקמת 20 אחוזים משמאל. 100% משמעו תמונה שמיושרת ימינה (או למטה, אם זה המספר השני מבין השתיים), וכדו'.
ממליצה לשחק עם ההגדרה כדי להגיע לתוצאה המדויקת הדרושה.
חשוב לזכור שניתן לשלב בין אפשרויות המיקום השונות.
background-position: left 50px; // ממוקם בצד שמאל, 50 פיקסלים מלמעלה. background-position: right 40px top // ממקם את התמונה 40 פיקסלים מימין, צמודה למעלה.
background-repeat – חזרת הרקע
ההגדרה קובעת האם התמונה תחזור על עצמה או לא, במידה והיא קטנה יותר מהקונטיינר שלה. לדוגמה תמונה בגודל 10*10 פיקסל וקונטיינר בגודל 20*20. התמונה ממוקמת בשמאל-למעלה. מה קורה בשאר השטח?
ההגדרות האפשריות הן:
no-repeat– ללא חזרה. התמונה מופיעה פעם אחת בלבד.repeat– ברירת מחדל. עם חזרה לאורך ולרוחב.repeat-x– חזרה אופקית בלבד. בדוגמת הגדלים שלמעלה – התמונה משוכפלת פעמים למעלהrepeat-y– חזרה אנכית בלבד.
background-size – גודל תמונת הרקע
כברירת מחדל התמונה מופיעה בגודל המקורי שלה, גם במידה והיא גדולה או קטנה יותר מהקונטיינר שלה. ניתן להגדיר באופנים. בכל מקרה יש להגדיר קודם את הרוחב ואז את הגובה.
בפיקסלים ואחוזים ניתן לשלב את ההגדרה auto, כך שנעשה שימוש בפרופורציה המקורית של התמונה בלי לקבוע לה גם רוחב וגם גובה. באופן הזה התמונה לא תתעוות בשל הגדרת גודל ששונה מהפרופורציה שלה. (לדוגמה תמונה בגודל 10*10פיקסלים, אם נגדיר לה רוחב של 20 רוחב ו10 גובה – היא תתעוות. לכן נשתמש בauto לאחד הפרמטרים – או אורך או רוחב).
גודל תמונה בפיקסלים
התמונה תוצג בגודל המדוייק שהוגדר לה, בלי קשר לגודל הקונטיינר שלה.
לדוגמה background-size: 40px auto – התמונה תופיע ברוחב 40 פיקסלים ובגובה אוטומטי לפי הפרופורציה המקורית שלה.
גודל תמונה באחוזים
האחוזים הם מגודל הקונטיינר של התמונה ולא מהתמונה עצמה. לדוגמה התמונה בגודל 10*10, הקונטיינר שלה הוא בגודל 20*20, ונגדיר לתמונה background-size: 100% auto. התמונה תופיע ברוחב 100% של הקונטיינר שלה, שזה 20 פיקסלים, ובגובה אוטומטי, כלומר – 20 פיקסלים גם כן.
cover / contain
אלו הגדרות של CSS3, דומות ושונות. בכל מקרה לא יהיה עיוות של התמונה אלא היא שומרת על הפרופורציה המקורית שלה.
cover – מותח או מכווץ את התמונה כך שתתפוס את מלא הגודל של הקונטיינר. במקרה הזו לא יהיו שוליים אך התמונה עשויה להיחתך.
contain – מותח או מכווץ את התמונה כך שתכנס במלואה בתוך הקונטיינר. במקרה כזה כן יהיו שוליים ריקים, אך התמונה לא תיחתך.
להדגשת ההבדלים ביניהם ניקח קונטיינר בגודל 200*200, ותמונה ברוחב 200 ובגובה 100 פיקסלים.
במצב cover – התמונה צריכה לגדול לגובה 200 פיקסלים (גדלה פי 2), על מנת למלא את הגובה של הקונטיינר. הרוחב שלה יגדל בהתאמה ל400 פיקסל (גדל פי 2 בהתאמה להגדלה בגובה). היא כמובן תיחתך ולא יראו את כולה.
במצב contain – רוחב התמונה ממלא בדיוק את רוחב הקונטיינר ולכן התמונה תישאר בגודל המקורי שלה. יישארו שוליים לבנים בקונטיינר, שאותם התמונה לא ממלאה.
בדרך כלל נשתמש בcover עבור תמונות רקע של באנרים וקומות שונות, ולכן צריך להקפיד להעלות תמונה שהעיקר שלה נמצא במרכז, כי הצדדים עשויים להיחתך בגדלי מסך שונים.
background – ההגדרה המצומצמת
דוגמאות לכתיבה מקוצרת של הגדרת רקע:
background: transparent url(https://chani-k.co.il/wp-content/uploads/2018/07/25388715424_65480dbf18_k.jpg) center / cover no-repeat; background: red url(images/hello.png) repeat-x background: url(....) center bottom / contain no-repeat;
וכדו'. יכול להיות שלא יילך על הניסיון הראשון, אבל זה בדיוק המקום לערוך בדיקות ולנסות שוב ושוב עד שמצליח.
background-attachment, background-clip, background-origin
עד כאן פירטנו על הגדרות הרקע הנפוצות. ישנן עוד מספר הגדרות שפחות באות לידי שימוש. background-clip, background-origin, background-attachment. נפרט בשתי מילים על כל אחת מהן:
background-attachment – נעיצת הרקע. משמש בעיקר כשרוצים שהרקע יישאר נעוץ גם כשגוללים את התוכן.
background-clip – מגדיר האם הרקע יופיע באזור התוכן, הpadding או הborder, עם חיתוך במידה ומדובר בתמונה
background-origin – זהה לסעיף הקודם, רק בלי חיתוך של התמונה אלא הקטנה שלה.
בהצלחה