אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס

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

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

[ccwn_css]
display: block;
display: inline;
[/ccwn_css]

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

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

[ccwn_css]

display: block;
background: url(images/frame.png) no-repeat;
padding: 8px 10px 7px 10px; /*or any other values you need */

[/ccwn_css]

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

שתפו גם אחרים:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

8 תגובות »

• תומר כהן הגיב:

  19/03/2010 בשעה 13:51

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

  להגיב לתגובה זו
• מאור ברזני הגיב:

  19/03/2010 בשעה 17:06

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

  להגיב לתגובה זו
• ליאון אטקינסון הגיב:

  29/03/2010 בשעה 09:46

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

  להגיב לתגובה זו
  • מאור ברזני הגיב:

    29/03/2010 בשעה 12:58

    להיפך, הפיתרון שלי מפשט את הקוד.
    בשביל מה לך לעטוף כל תמונה בדיב מיותר ? ואם יש לך גלריה ש ל100 תמונות למשל? או של 1000? אז יהיו עוד 1000 דיבים עוטפי תמונה? סתם תוספת של קוד מיותר וחסר ערך, ובשביל מה, רק בשביל הרקע?
    אם אתה מדבר על סמנטקיה, אז זה הכי נכון, כי אין שום טעם ב-DIV שיהיה בתוך כל פריט רשימה, כי זה מה שיסבך את הקוד דווקא.
    סמנטית אז קח רשימת פריטים למשל ul/li שבתוך כל פריט יש לנו אלמנט תמונה. פשוט, נכון ונוח.

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

    להגיב לתגובה זו
    • ליאון אטקינסון הגיב:

      29/03/2010 בשעה 16:39

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

      וסתם בלי שום קשר המבנה של הצגת הקוד לדוגמא עם הרקע השחור נראה טוב אבל המבנה לדעתי הוא שגוי – div מספר וbr בתוך טבלה…בהחלט מיותר.
      זו דוגמא קלאסית לOL לדוגמא:
      http://www.tutorialmagazine.com/tutorials/view/animate_panning_slideshow_with_jquery_97
      .-= פורסם לאחרונה אצל ליאון אטקינסון.. ‫תבנית וורדפרס בעברית להורדה – Simple Paper‬ =-.

      להגיב לתגובה זו
      • מאור ברזני הגיב:

        30/03/2010 בשעה 03:10

        נותנים קלאס חוזר על עצמו לאימאג', ומוסיפים לו את ה-CSS שהדגמתי.
        בשביל מה לעטוף את התמונה ב-div?

        לגבי דוגמאות הקוד בקוביה בשחור – הקוד נוצר ע"י תוסף של וורדפרס, לא התערבתי בקוד של התוסף, זה לא משנה לי כ"כ פה.

        להגיב לתגובה זו
      • מאור ברזני הגיב:

        30/03/2010 בשעה 05:14

        תודה על הלינק לפלאגין של הjQuery.
        ניסיתי אותו עכשיו בתור מסך פרומו לאתר שיעלה בקרוב –

        http://www.route66.co.il

        להגיב לתגובה זו
        • ליאון אטקינסון הגיב:

          30/03/2010 בשעה 10:42

          מגניב – עשית לזה אחלה שימוש.
          חג שמח ידידי.
          .-= פורסם לאחרונה אצל ליאון אטקינסון.. ‫תבנית וורדפרס בעברית להורדה – Simple Paper‬ =-.

          להגיב לתגובה זו

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

הוסף תגובה

ביטול

שם (נדרש)

אימייל (לא יפורסם) (נדרש)

הודע לי על תגובות חדשות דרך דואר:

Δ