תמונות רקע גוף נעשות בקלות

html

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

איך זה נעשה?

  1. גלה עד כמה רחב התוכן שלך. דוגמה: 750 פיקסלים.
  2. בנה תמונה ביישום האיור שלך (אני משתמש ב- Illustrator) רחבה יותר מאזור התוכן. דוגמה: 800 פיקסלים.
  3. הגדר את הרקע של התמונה לרקע שברצונך שיהיה בכל צד של הבלוג.
  4. הוסף אזור לבן על הרקע.
  5. החל צל ​​על האזור הלבן המשתחל משני צידי האזור.
  6. הגדר את שטח החיתוך ברוחב בגובה פיקסל אחד. זה יהפוך את התמונה להורדה נחמדה וקומפקטית לעיבוד מהיר.
  7. פלט את התמונה.

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

הנה דוגמה לאופן שבו הפלט ייראה עם תמונת הרקע:
דוגמה לתמונת רקע

כך תיישם את התמונה באמצעות תג סגנון הגוף שלך ב- CSS קובץ.

רקע: # B2B2B2 url ('images / bg.gif') מרכז לחזור y;

הנה ניתוח של תג סגנון הרקע:

  • # B2B2B2 - מגדיר את צבע הרקע הכולל של הדף. בדוגמה זו, זה אפור כדי להתאים את האפור על תמונת הרקע.
  • url ('images / bg.gif') - מגדיר את תמונת הרקע בה תרצה להשתמש.
  • repeat-y - מגדיר את התמונה לחזרה על ציר ה- y. אז תמונת הרקע תחזור על עצמה מלמעלה למטה של ​​הדף.
  • מרכז - מגדיר את התמונה במרכז העמוד.

נחמד וקל ... תמונה אחת, תג סגנון אחד!

תגובות 2

  1. 1
  2. 2

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.