תכונת background ועיצוב רקעים

שינוי צבע הרקע לאלמנט

ניתן לקבוע את צבע הרקע לאלמנטים שונים ב-HTML באמצעות התכונה background-color.

דוגמאות:

body {
	background-color:red;
}

.sky{
	background-color:blue;
}

בדוגמה זו, צבע הרקע בעמוד יהיה red (אדום) וצבעי האלמנטים השייכים למחלקה sky יהיו בכחול.

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

דוגמאות לקביעת צבעי רקע לאלמנטים שונים בכל אחת מהשיטות השונות:

.grass{
	background-color:green;  // green grass
}

.skies{
	background-color:rgb(68,85,248);  // blue skies
}

.cloud{
	background-color:rgba(194,194,194,0.7);  // grey cloud with transparency
}

.ground{
	background-color:#c15411;  // brown ground
}

.sunrise{
	background-color:hsl(58, 93.6%, 49%);  // yellow sun
}

.sunset{
	background-color:hsla(44, 95.8%, 47.1%, 0.6);  // orange sun
}

להבנה טובה יותר של האפשרויות השונות לייצוג צבעים, אנו ממליצים להעמיק ולקרוא את המאמר בנושא ייצוג צבעים, ומודלים RGB ו-HSL.

קביעת תמונת רקע

ניתן לקבוע תמונת רקע באמצעות שימוש בתכונה background-image. את התמונה ניתן לקבוע לכל אלמנט HTML, לרבות כל העמוד (ה-body). אם תמונת הרקע גדולה מהאלמנט, היא תחתך. אם היא קטנה מהאלמנט, היא תשתכפל עד לכיסוי מלא של האלמנט.

דוגמה:

.crowd {
	background-image:url('people.webp');
}

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

שיכפול תמונת הרקע

בדוגמה לעיל, התמונה תשוכפל שוב ושוב ותרצף את כל האלמנט. נוכל לשלוט בשכפול באמצעות התכונה background-repeat.

התכונה יכולה לקבל את הערכים הבאים:

• no-repeat - ללא שכפול
• repeat-x - שכפול לרוחב בלבד
• repeat-y - שכפול לגובה בלבד
• repeat - שכפול לגובה ולרוחב

דוגמה:

.crowd {
	background-image:url('people.webp');
	background-repeat:repeat-x;
}

קיבוע תמונת הרקע

נוכל לקבוע האם בעת גלילה של העמוד מעלה-מטה או לצדדים, תמונת הרקע תהיה מקובעת ולא תיגלל או שהיא תיגלל יחד עם יתר האלמנטים. נעשה זאת באמצעות התכונה background-attachment.

התכונה יכולה לקבל את הערכים הבאים:

• fixed - תמונה מקובעת.
• scroll - גלילה.

דוגמה:

.crowd {
	background-image:url('people.webp');
	background-repeat:repeat-x;
	background-attachment:fixed;
}

מיקום תמונת הרקע

נוכל לקבוע את מיקום תמונת הרקע באלמנט בה הוא מוצג, באמצעות שימוש בתכונה background-position.

תכונה זו יכולה לקבל מגוון ערכים:

1. ערך בודד מהערכים הבאים: bottom, top, left, right, center אשר מצמידים את התמונה בהתאמה למטה, למעלה, שמאלה, ימינה או למרכז.

2. ערך כפול מהערכים לעיל, לדוגמה: bottom left או top right או right top וכיו"ב.

3. זוג ערכים ביחידות כלשהן (סנטימטרים cm, פיקסלים px, אחוזים %, מידה יחסית לאלמנט em). הערכים יופרדו בסימן רווח. ניתן לשלב יחידות שונות. לדוגמה: 25% 20% או 150% 20px. הערך הראשון (השמאלי) יהיה מחושב משמאל ויתייחס לרוחב והערך השני (הימני) יחושב מלמעלה ויתייחס לגובה.

4. שימוש בערכים ביחידות כלשהן, בשילוב עם הביטויים bottom, top, left, right כדי לציין את נקודת הייחוס. לדוגמה: bottom 20% כדי למקם בגובה 20% מהגובה החל מלמטה. דוגמה נוספת: right 100px top 5% כדי למקם 100 פיקסלים מימין ובגובה 5% מהגובה החל מלמעלה.

דוגמה:

.crowd {
	background-image:url('people.webp');
	background-repeat:repeat-x;
	background-attachment:fixed;
	background-position:right 5% top 20px;
}

שימוש ב-background בצורה מקוצרת

ניתן לאחד כמה תכונות שונות לכדי תכונת background יחידה.

לדוגמה:

.crowd {
	background:#c15411 url('people.webp') no-repeat fixed right 5% top 20px;
}

חובה לשמור על הסדר הבא:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

ניתן לדלג על חלק מהתכונות, כל עוד נשמר הסדר.

דוגמה:

.crowd {
	background:#c15411 url('people.webp') no-repeat right 5% top 20px;
}

בדוגמה זו דילגנו על תכונת background-attachment.