כיצד למתוח תמונת רקע כדי להתאים דף אינטרנט

תן את האתר שלך חזותי עניין עם רקע גרפיקה

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

אם אתה מתחיל לעבוד עם תמונות רקע, אתה ללא ספק תרוץ לתוך התרחיש שבו אתה רוצה תמונה כדי למתוח את הדף.

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

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

הדרך הטובה ביותר למתוח תמונה כדי להתאים את הרקע של הדף היא להשתמש המאפיין CSS3 , עבור גודל הרקע. הנה דוגמא שמשתמשת בתמונת רקע לגוף של דף ואשר קובע את הגודל ל -100% כך שתמיד ימתח כדי שיתאים למסך.

body {
רקע: url (bgimage.jpg) no-repeat;
background-size: 100%;
}

לפי caniuse.com, תכונה זו פועלת ב- IE 9+, Firefox 4+, Opera 10.5, Safari 5+, Chrome 10.5 ואילך, ובכל הדפדפנים הניידים העיקריים. זה מכסה לך את כל הדפדפנים המודרניים הזמינים כיום, כלומר אתה צריך להשתמש בנכס זה ללא חשש שזה לא יעבוד על המסך של מישהו.

זיוף רקע מתוח בדפדפנים ישנים יותר

זה מאוד לא סביר כי אתה צריך לתמוך בכל הדפדפנים ישנים יותר מאשר IE9, אבל בואו נניח שאתה מודאג כי IE8 אינו תומך זה רכוש. במקרה זה, אתה יכול לזייף רקע מתוח. ואתה יכול להשתמש בקידומות הדפדפן עבור Firefox 3.6 (-Moz-background-size) ו- Opera 10.0 (גודל-רקע).

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

id = "bg" />

1. ראשית, ודא שלכל הדפדפנים יש גובה של 100%, 0 שוליים ו- 0 ריפוד על רכיבי HTML BODY. הצב את המידע הבא בראש מסמך ה- HTML שלך:

2. הוסף את התמונה שאתה רוצה להיות הרקע כאלמנט הראשון של דף האינטרנט, ולתת לו את המזהה של "bg":

3. מקם את תמונת הרקע כך שהוא קבוע בחלק העליון והשמאלי והוא 100% רחב ו 100% בגובה. הוסף את זה לגיליון הסגנונות שלך:

   img # bg {
   תפקיד: קבוע;
   top you01;
   משמאל: 0;
   רוחב: 100%;
   גובה: 100%;
   }

4. הוסף את כל התוכן שלך לדף בתוך אלמנט DIV עם מזהה של "תוכן". הוסף את DIV מתחת לתמונה:

   כל התוכן שלך כאן - כולל כותרות, פסקאות וכו '.

   הערה: מעניין לראות את הדף שלך כעת. התמונה צריכה להיות מתוחה, אבל התוכן שלך חסר לחלוטין. למה? מכיוון שתמונת הרקע היא בגובה של 100%, וחלוקת התוכן היא אחרי התמונה בזרימת המסמך - רוב הדפדפנים לא יציגו אותה.
   
5. מקם את התוכן שלך כך שהוא יחסי ויש לו אינדקס z של 1. זה יביא אותו מעל תמונת הרקע בדפדפנים תואמי תקנים. הוסף את זה לגיליון הסגנונות שלך:

   #content {
   מקומות יחסית
   z-index: 1;
   }

1. אבל לא סיימת. Internet Explorer 6 אינו תואם לתקנים ועדיין יש כמה בעיות. ישנן דרכים רבות להסתיר את CSS מכל דפדפן, אך IE6, אבל הקלה ביותר (וגם פחות סביר לגרום לבעיות אחרות) היא להשתמש הערות מותנה. שים את הדברים הבאים אחרי גליון הסגנונות שבראש המסמך:

2. בתוך הערה מודגשת, להוסיף גיליון סגנונות נוסף עם כמה סגנונות כדי לקבל IE 6 לשחק נחמד:

3. הקפד לבדוק IE 7 ו- IE 8 גם כן. ייתכן שיהיה עליך להתאים את ההערות כדי לתמוך בהם גם כן. עם זאת, זה עבד כשבדקתי את זה.

אישור - זה בהחלט מוגזם. מעט מאוד אתרים צריכים לתמוך IE 7 או 8 יותר, הרבה פחות IE6!

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

זיוף תמונת רקע מתוח על שטח קטן יותר

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

1. הצב את התמונה בדף שבו ברצונך להשתמש כרקע.

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

   img # bg {
   width: 20em;
   גובה: 30em;
   }

3. מניחים את התוכן שלך ב- div עם מזהה "תוכן" כפי שעשינו לעיל:

   כל התוכן שלך כאן

4. סגנון div התוכן להיות רוחב וגובה זהה לתמונת הרקע:

   div # content {
   width: 20em;
   גובה: 30em;
   }

5. לאחר מכן הצב את התוכן עד לגובה זהה לתמונה. אז אם התמונה שלך היא 30em היה לך סגנון של הדף: -30em; אל תשכח לשים Z- אינדקס של 1 על התוכן.

   #content {
   מקומות יחסית
   העליון: -30em;
   z-index: 1;
   width: 20em;
   גובה: 30em;
   }

6. לאחר מכן, הוסף מדד z של -1 עבור משתמשי IE 6, כפי שעשית למעלה:

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

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