רקעים | CSS

[מוטי אורן]

מדריך לעיצוב רקעים באמצעות CSS

--

בכדי להוסיף צבע רקע לאלמנט כלשהו, נשתמש בתכונה background-color כך:

p { background-color: lightblue; }

בדוגמה הזו כל הפסקאות בדף יקבלו צבע רקע תכלת (lightblue).

אם נרצה לתת צבע רקע לכל הדף, נאפיין את תגית ה – body עם תכונת background-color.

קיימת תכונה מעניינת שניתן להוסיפה בכדי להגדיר בהירות לצבע. התכונה נקראת opacity:

p { 
  background-color: green; 
  opacity: 0.7; 
}

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

p { background-color: rgba(0, 200, 0, 0.4); }

כשבפרמטר האחרון (מימין) נכתוב את מידת האטימות של הצבע.

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

נניח שנרצה להגדיר תמונת רקע ל – div כלשהו. בשביל לעשות את זה נשתמש בתכונה background-image.

div { background-image: url("./images/image.jpg"); }

כשב – url ניתן את מיקום התמונה.

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

div { 
  background-image: url("./images/image.jpg"); 
  background-position: right top;
}

בדוגמה שלעיל התמונה תוצב במיקום הימני העליון של האלמנט.

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

div { 
  background-image: url("./images/image.jpg"); 
  background-repeat: no-repeat; 
  packground-position: right top; 
}

בדוגמה הזאת קבענו את תכונת ה – repeat ל – no-repeat, כלומר ללא חזרה על התמונה כלל.

ניתן לקבוע את החזרה של התמונה רק לאורך ציר ה – y או ציר ה – x של האלמנט:

div { 
  background-image: url("./images/image.jpg"); 
  background-repeat: repeat-y; 
}

אם נרצה לקבוע שהתמונה לא תזוז עם גלילת הדף (זה יוצר אפקט ויזואלי מעניין ואפילו משתמשים בזה הרבה), נשתמש בתכונה background-attachment:

div { 
  background-image: url("./images/image.jpg"); 
  background-attachment: fixed; 
}

ניתן להגדיר שהתמונה תיגלל, אם נשנה את הערך של התכונה ל – scroll:

div { 
  background-image: url("./images/image.jpg"); 
  background-attachment: scroll; 
}

את כל מה שראינו עד עכשיו, ניתן לכתוב בקיצור על ידי התכונה background:

div { 
  background: green url("./images/image.jpg") no-repeat left top; 
}

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

• width & height – רוחב וגובה של התמונה. ניתן לקבוע זאת באמצעות אחוזים פיקסלים ועוד.
• cover – משמעותו היא שכל האלמנט יקבל את תמונת הרקע. ואם האלמנט לא מתאים בגודלו, התמונה תחתך בכדי שתתאים לגודל האלמנט.
• contain – האלמנט יכיל את כל התמונה. אם הגודל לא מתאים, התמונה תקטן.

תכונת הגודל נכתבת כך:

div { 
  background-image: url("./images/image.jpg"); 
  background-size: cover; 
}