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

הגדרת רקע ב- CSS

נתחיל בהגדרת HTML אשר כולל כותרת ופסקה:

<body>
  <h1>Background Colors!</h1>
  <p class="pars">And here is an example paragraph</p>
</body>

ה- property ה- CSS-י לקביעת צבע רקע הוא backround-color.

בואו נראה דוגמה פשוטה לשימוש בו:

.pars
{
   background-color: pink;
}

התוצאה:

 

 

שימוש ב- selector של body להגדרת רקע של דף

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

body
{
   background-color: pink;
}

והתוצאה:

 

שימוש בצבעי RGB לקביעת צבע הרקע

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

body
{
   background-color: rgb(235, 133, 52);
}

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

לפעמים נרצה להשתמש בתמונה כרקע של הדף. באמצעות CSS ניתן לעשות זאת בקלות, באופן דומה להגדרת צבע רקע. ההבדל העיקרי הוא, שבמקום להשתמש ב- background-color, נשתמש ב- background-image.

כמו כן, בדומה לפונקציה rgb בה השתמשנו להגדרת צבעים, נשתמש בפונקציה url להגדרת ה- path בו נמצאת התמונה.

כאשר משתמשים בתמונת רקע, יש שתי אפשרויות:

  • שימוש בתמונה לוקלית
  • שימוש בקישור לתמונה מהאינטרנט

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

נניח שמעבר לקובץ ה- CSS וה- HTML, יש לי גם תמונה בתוך תיקייה שנקראת backgrounds. נעדכן את קובץ ה- CSS ונשתמש בתמונה זו כרקע באמצעות הפונקציה url:

body
{
   background-image: url("./backgrounds/pexels-jaime-reimer-2662116.jpg");
}

והתוצאה:

 

שימו לב למרכאות בהן כתבנו את כתובת התמונה. הן חיוניות!

אפשר לראות שהתמונה נחתכה בציר האופקי ואנו לא רואים את כולה. כמו כן, היא שוכפלה בציר האנכי ואנו רואים בעצם שתי תמונות זו מתחת לזו (או לפחות את חלקן…)

נטפל בדברים האלו בפוסטים הבאים, אבל יש לנו תמונת רקע!

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

באופן דומה לתמונה לוקלית, אפשר גם להשתמש בקישור לתמונה מהאינטרנט. זה מתבצע באופן זהה לחלוטין, כאשר ההבדל היחיד הוא שבמקום path לקובץ לוקלי, נכתוב בתוך ה- url את כתובת התמונה באינטרנט:

body
{
   background-image: url("https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?cs=srgb&dl=pexels-jaime-reimer-2662116.jpg&fm=jpg&w=640&h=427");
}

ההבדל בין background-color, background-image לבין background

ראינו את ה- property של background-color, שהשתמשנו בו לקביעת צבע הרקע, וגם את background-image שהשתמשנו בו לקביעת תמונת רקע.

יש property נוסף, בשם background, אשר ניתן להשתמש בו במקום השניים האחרים. אם בתור ערך ניתן לו צבע, הוא יתפקד כמו background-color, אבל אם בתור ערך ניתן לו url של תמונה, הוא יתפקד כמו background-image.

למשל:

body
{
   background: url("./backgrounds/pexels-jaime-reimer-2662116.jpg");
}

שימו לב איך עשינו שימוש ב- background במקום ב- background-image, והתוצאה זהה.

הגמישות הזו הופכת את background לנוח יותר לשימוש (לפחות לפי דעתי), אבל שלושת ה- properties האלו עומדים לרשותכם ואתם יכולים להשתמש בכולם.