עיין באתרי אינטרנט פופולריים כיום וטיפול עיצובי אחד שאתה בטוח תראה הוא תמונות רקע גדולות ומשתרעות על המסך. אחד האתגרים בהוספת תמונות אלה נובע מהשיטות הטובות ביותר שעל אתרים להגיב לגדלי מסך ומכשירים שונים - גישה המכונה עיצוב אתרים רספונסיבי.
תמונה אחת למסכים רבים
מכיוון שפריסת האתר שלך משתנה וקנה מידה עם גדלי מסך שונים, כך גם תמונות רקע אלה צריכות לשנות את גודלן בהתאם. למעשה, "תמונות נזילות" אלה הן אחד החלקים המרכזיים של אתרים רספונסיביים (יחד עם רשת נוזלית ושאילתות מדיה). שלושת החלקים הללו היוו מצרך מרכזי של עיצוב אתרים רספונסיבי מתחילתו, אך אמנם תמיד היה די קל להוסיף תגובה. תמונות מוטבעות לאתר (תמונות מוטבעות הן הגרפיקה המקודדת כחלק מסימון ה- HTML), וכך גם עם תמונות רקע (אשר מעוצבים לדף תוך שימוש במאפייני רקע CSS) היווה זמן רב אתגר משמעותי למעצבי אתרים רבים ולחזית הקצה מפתחים. למרבה המזל, הוספת המאפיין "בגודל רקע" ב- CSS אפשרה זאת.
במאמר נפרד סקרנו כיצד להשתמש ב- גודל רקע של נכס CSS3 למתוח תמונות כך שישתלבו בחלון, אך יש דרך טובה ושימושית יותר לפרוס עבור נכס זה. לשם כך נשתמש בשילוב המאפיין והערך הבא:
גודל רקע: כריכה;
מאפיין מילת המפתח לכריכה אומר לדפדפן לשנות את גודל התמונה כך שתתאים לחלון, ללא קשר לגודל או קטן לחלון זה. התמונה מוקטנת בכדי לכסות את כל המסך, אך הפרופורציות ויחס הגובה-רוח המקוריים נשמרים על כנם, ומונעים מעוות את התמונה עצמה. התמונה ממוקמת בחלון כמה שיותר גדולה כך שמשטח החלון כולו יהיה מכוסה. משמעות הדבר היא שלא יהיו לך נקודות ריקות בעמוד שלך או עיוותים כלשהם בתמונה, אלא גם זה פירושו שחלק מהתמונה עשויה להיות מקוצצת בהתאם ליחס הגובה-רוחב של המסך והתמונה פנימה שְׁאֵלָה. לדוגמה, הקצוות של התמונה (בחלק העליון, התחתון, השמאלי או הימני) עשויים להיות מנותקים בתמונות, תלוי בערכים שבהם אתה משתמש למאפיין מיקום הרקע. אם אתה מכוון את הרקע ל"שמאל למעלה ", כל עודף בתמונה יירד מהצד התחתון והצד הימני. אם תרכז את תמונת הרקע, העודף יירד מכל הצדדים, אך מכיוון שעודף זה פרוש, ההשפעה על כל צד אחד תהיה פחות משרתת.
כיצד להשתמש 'גודל רקע: כיסוי;'
בעת יצירת תמונת הרקע שלך, מומלץ ליצור תמונה גדולה למדי. בעוד שדפדפנים יכולים להקטין תמונה ללא השפעה ניכרת על האיכות החזותית, כאשר דפדפן מגדיל תמונה תמונה בגודל גדול ממידותיה המקוריות, האיכות הוויזואלית תושפל ותפשט מפוקסל. החיסרון בכך הוא שהדף שלך זוכה להיט ביצועים כאשר אתה מעביר תמונות ענק לכל המסכים. כאשר אתה עושה זאת, הקפד לעשות זאת כראוי הכין את התמונות האלה למהירות הורדה ומסירת אינטרנט. בסופו של דבר, עליכם למצוא את המדיום המאושר בין גודל תמונה ואיכות גדולים מספיק לגודל קובץ סביר למהירויות הורדה.
אחת הדרכים הנפוצות לשימוש בהגדלת תמונות רקע היא כאשר ברצונך שהתמונה הזו תצלם את הרקע המלא של דף, בין אם דף זה רחב ומוצג במחשב שולחני ובין אם הוא קטן בהרבה ונשלח לכף יד נייד מכשירים.
העלה את התמונה שלך למארח האינטרנט שלך והוסף אותה ל- CSS שלך כתמונת רקע:
תמונת רקע: url (זיקוקים-מעל-wdw.jpg);
רקע-חזרה: אין לחזור;
עמדת רקע: מרכז מרכז;
מצורף רקע: קבוע;
הוסף תחילה את ה- CSS המקדים לדפדפן:
-וובקיט-רקע-גודל: כריכה;
-מוז-רקע-גודל: כריכה;
-או-רקע-גודל: כריכה;
לאחר מכן הוסף את מאפיין CSS:
גודל רקע: כריכה;
שימוש בתמונות שונות המתאימות למכשירים משתנים
אומנם חשוב לעצב רספונסיבי לשולחן העבודה או למחשב נייד, אך מגוון המכשירים שיכול לגשת לאינטרנט גדל משמעותית, ומגוון גדול יותר של גדלי מסך מגיע עם זֶה.
כפי שצוין לעיל, טעינת תמונת רקע רספונסיבית גדולה מאוד בסמארטפון, למשל, אינה עיצוב יעיל או מודע לרוחב הפס.
למד כיצד תוכל להשתמש שאילתות מדיה כדי להגיש תמונות שיתאימו למכשירים שהם יוצגו בהם ולשפר עוד יותר את תאימות האתר שלך למכשירים ניידים.