19
במרץ
2010

טיפ CSS: תמונת רקע לתמונה

מאת: מאור ברזני | תגובות: 8 | נושאים: אינטרנט,טכנולוגיה
תגיות: , , , |

לפעמים זה יכול לעזור לשאול את השאלה הפשוטה והברורה מאליו: האם אפשר לשים תמונת רקע לתמונה?  אז התשובה היא שאפשר! באתר שאני עובד עליו לאחרונה, היה צורך לצרף תמונת רקע קבועה לתמונות שרצות בגלריה. אפשרות אחת היא כמובן לשים את תמונת הרקע כאלמנט אימאג' בתוך המסמך שישב בתור קונטיינר עוטף לתמונה עצמה. זה אפשרי, ואולי גם נכון במקרה שרוצים שתמונת הרקע הקבועה עצמה תיקח חלק ב-SEO.

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

מאחר שבמקרים רבים תמונת רקע החוזרת על עצמה לא ממש דרושה לקידום האתר, אפשר לעשות אופטימיזציה של הקוד, לפשט את מבנה התמונה ולחסוך בקריאות HTTP, זאת ע"י שימוש בתמונת רקע לתמונה בעזרת CSS פשוט.

אלמנטים inline ו- block

כברירת מחדל, האלמנט img ב-html הוא אלמנט אינלייני (inline element). משמעות הדבר היא שישנם מאפיינים שונים שלא ניתן לקבוע לאלמנט כזה, כמו למשל תמונת רקע (צבע רקע כן).

בגדול ובפשטות, ההבדל בין אלמנטים בלוקים (block elements) ובין אלמנטים אינליינים הוא שאלמנטים בלוקים מתחילים בשורה חדשה ותופסים את מקסימום המקום שהם יכולים. הם למעשה מגדירים בלוק, מלבן שלם שברירת מחדל הוא לכל רוחב המסך והמלבן הבא יבוא מתחתיו. אלמנטים כאלה הם למשל פסקה (p), בלוק (div), רשימות (ol, ul) הכותרות השונות (h1-h6) ועוד.

אלמנטים אחרים, כמו למשל  input, a, span, img, strong ואחרים הם אלמנטים אינליינים.  המשמעות היא שהם עוטפים למעשה את התוכן שבתוכם, מידותיהם נקבעות לפי התוכן שהם מכילים. אפשר לומר שהם לוקחים רק את המקום שהם צריכים.

בעזרת css אפשר להציג אלמנטים אינליינים כבלוקים וההיפך, זאת ע"י המאפיין display:

1
2
display: block;
display: inline;

להוסיף מסגרת לתמונה כתמונת רקע

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

1
2
3
display: block;
background: url(images/frame.png) no-repeat;
padding: 8px 10px 7px 10px; /*or any other values you need */
שתפו גם אחרים:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • LinkedIn
  • Google Bookmarks
  • Live
  • PDF
  • MySpace
  • del.icio.us
  • Digg
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

8 תגובות »

  • מאת תומר כהן:

    ב־CSS3 ישנה אפשרות של Multiple backgrounds, כלומר לצרף יותר מרכיב אחד לרקע של האלמנט. אמנם לא כל הדפדפנים תומכים בזה עדיין, אבל זה עשוי להיות שימושי אם מרכיבים רקע בצורה חכמה כך שגם דפדפנים מיושנים יותר יצליחו להתמודד עם ההנחייה ולהרכיב משהו שנראה סביר.
    פורסם לאחרונה אצל תומר כהן.. ‫משדרגים את האתר‬ My ComLuv Profile

  • @תומר, אתה צודק לגבי CSS3 ורקעים מורבים. אבל כמו שאמרת, קודם כל לא כל הדפדפנים תומכים בזה…
    שנית , אם יש לך למשל גלריית תמונות, לא בטוח שתרצ לשים את כל התמונות של הגלריה בתור תמונות רקע, כי אז תפסיד הרבה באופטימיזציה SEO שלהן.
    כך שבמקרה כזה ייתכן שעדיין תרצה לשים תמונה רגילה באלמנט img ותמונת רקע עבורו.

  • אחלה הסבר על ההבדל בין blockelement וinlineelement,
    תודה.
    בנוגע לתמונת רקע עבור תמונה לדעתי הדרך התקינה ביותר היא הדרך הפשוטה של background בCSS, למרות שנתת פתרון של תמונה על תמונה זה נראה לי פשוט לא נכון סמנטית למרות יתרונות SEO,
    כשאפשר לתת לDIV בCSS תמונת רקע אני לא רואה שום סיבה לנסות לסבך את הקוד באפשרויות כאלה ואחרות.
    פורסם לאחרונה אצל ליאון אטקינסון.. ‫תבנית וורדפרס בעברית להורדה – Simple Paper‬ My ComLuv Profile

פיד RSS לתגובות בפוסט | טראקבק


הוסף תגובה

Gravity Forms Plugin for WordPress

You can add images to your comment by clicking here.

TechnoCraft - פתרונות אינטרנט


אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס - וורדפרס, תוכן, טכנולוגיה ועוד כמה דברים - מופעל באמצעות WordPress | פתרונות אינטרנט