מדריך לעיצוב רקעים באמצעות 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;
}
אשמח לפידבקים 😉 . בהצלחה!
