מאפייני CSS הקשורים לרקע

Articles

מאמר זה מסביר מאפייני CSS הקשורים לרקע.

תוכלו ללמוד כיצד לתאר מאפיינים כגון הגדרת רקע, מיקום וחזרה.

YouTube Video

יצירת HTML לתצוגה מקדימה

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

רקע וקישוטים

מאפיין `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

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

הסבר:

red-example הקלאס מגדיר את צבע הרקע כאדום באמצעות שם מפתח.
hex-example הקלאס מגדיר את צבע הרקע באמצעות קוד הקסדצימאלי.
rgb-example הקלאס מגדיר את צבע הרקע באמצעות פורמט RGB.
rgba-example הקלאס מגדיר את צבע הרקע באמצעות פורמט RGBA, המוסיף שקיפות.
hsl-example הקלאס מגדיר את צבע הרקע באמצעות פורמט HSL.
hsla-example הקלאס מגדיר את צבע הרקע באמצעות פורמט HSLA, המוסיף שקיפות.
transparent-example הקלאס מגדיר את הרקע כשקוף.

מאפיין `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

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

הסבר:

background-image-example הקלאס משתמש בפרופרטי background-image כדי להגדיר את image.jpg כרקע. background-size: cover גורם לתמונה לכסות את כל הרכיב, ו-background-position: center ממקם את התמונה במרכז. חזרה מנוטרלת באמצעות background-repeat: no-repeat.
המחלקה background-image-gradient משתמשת ב-linear-gradient() כדי להגדיר מעבר צבע רקע מאדום לכחול. מעבר הצבע מוצג משמאל לימין.

סוגי ערכים שניתן להגדיר

המאפיין background-image יכול לקבל את הערכים הבאים.

url(): מציין את כתובת ה-URL של תמונת הרקע. יש לכלול את קובץ התמונה בתוך url(). (ex.url('image.jpg'))
none: מציין שלא להגדיר תמונת רקע. זהו הערך המוגדר כברירת מחדל.
מעברי צבע: ניתן גם להגדיר מעברי צבע כרקעים באמצעות תכונות ה-gradient של CSS. (ex.linear-gradient(), radial-gradient())

נקודות מפתח של מאפיין ה-`background-image`

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

מאפיין `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

מאפיין ה-background-position משמש לציון המיקום של תמונת הרקע בתוך רכיב. על ידי שליטה במיקום שבו תמונת הרקע מוצגת בתוך הרכיב, ניתן ליצור פריסות התואמות את העיצוב שלך. ברירת המחדל היא 0% 0%, הממקמת את התמונה בפינה השמאלית העליונה.

הסבר:

top-left-example הקלאס מגדיר את מיקום התמונה כ-top left, הממקם את התמונה בפינה השמאלית העליונה.
center-example הקלאס ממקם את התמונה במרכז באמצעות התכונה center.
bottom-right-example הקלאס מגדיר את מיקום התמונה כ-bottom right, הממקם את התמונה בפינה הימנית התחתונה.

סוגי ערכים שניתן להגדיר

המאפיין background-position יכול לקבל את סוגי הערכים הבאים.

מילות מפתח: ניתן להגדיר left, right, top, bottom, center.
- הגדרה של center תמקם את תמונת הרקע במרכז הרכיב.
- הגדרה של right תמקם את תמונת הרקע בצד הימני.
- הגדרה של top left תמקם את תמונת הרקע בפינה העליונה השמאלית.
- ציון bottom right ימקם את תמונת הרקע בפינה הימנית התחתונה.
אורך או אחוזים: ניתן לציין ערכים כמו 10px 20px, 50% 50%.
- ציון 10px 20px ימקם את תמונת הרקע 10px מצד שמאל ו-20px מלמעלה.
- ציון 50% 50% ימקם את תמונת הרקע במרכז הן אופקית והן אנכית.
פונקציית calc(): מאפשרת מיקום מדויק יותר באמצעות חישובים של CSS.

המאפיין `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

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

הסבר:

cover-example הקלאס מגדיר cover. התמונה תוגדל כדי לכסות את האלמנט כולו, אבל חלקים עשויים להיחתך.
contain-example הקלאס מגדיר contain. התמונה תותאם כך שתתאים בתוך האלמנט, אבל עשוי להופיע שטח ריק.
fixed-size-example הקלאס מגדיר גודל קבוע לתמונת הרקע, וקובע רוחב וגובה של 100 פיקסלים כל אחד.

סוגי ערכים שניתן להגדיר

למאפיין background-size ניתן להקצות את סוגי הערכים הבאים.

מילות מפתח
- auto: משאיר את גודל ברירת המחדל של התמונה (הרוחב והגובה נקבעים אוטומטית).
- cover: מתאים את גודל תמונת הרקע כדי לכסות את האלמנט במלואו. זה ימלא את האלמנט כולו, אבל חלקים מתמונת הרקע עשויים להיחתך.
- contain: מתאים את התמונה כך שהיא תשתלב בתוך האלמנט, אבל לא תכסה את כל האלמנט. יחס הממדים של התמונה נשמר.
ערכים מספריים (px, %, em וכו')
- רוחב וגובה: ציין את הרוחב והגובה במפורש. אם רק ערך אחד צוין, הוא יחול על הרוחב והגובה יותאם אוטומטית.
- אחוזים: ציין את גודל תמונת הרקע כאחוז מגודל האלמנט. לדוגמה, 50% 50% מגדיר את התמונה לחצי מהרוחב והגובה של האלמנט.

מאפיין `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

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

הסבר:

repeat-example הקלאס מציג את התמונה חוזרת גם באופן אנכי וגם אופקי.
repeat-x-example הקלאס חוזר על התמונה באופן אופקי בלבד.
no-repeat-example הקלאס מציג את התמונה פעם אחת בלבד ללא חזרה.
space-example הקלאס מסדר את תמונות הרקע באופן אחיד עם מרווחים שווים ביניהן.
round-example הקלאס משנה אוטומטית את גודל תמונת הרקע כדי לחזור ולמלא את כל האלמנט.

ערכים שניתן להגדיר

למאפיין background-repeat ניתן להקצות את סוגי הערכים הבאים.

repeat: תמונת הרקע חוזרת לאורך שני הצירים - ציר ה-X (אופקי) וציר ה-Y (אנכי). זהו הערך המוגדר כברירת מחדל.
repeat-x: תמונת הרקע חוזרת רק לאורך ציר ה-X (אופקי).
repeat-y: תמונת הרקע חוזרת רק לאורך ציר ה-Y (אנכי).
no-repeat: תמונת הרקע אינה חוזרת ומוצגת רק פעם אחת.
space: תמונת הרקע חוזרת במרווחים קבועים, עם רווח שווה ביניהן.
round: תמונת הרקע חוזרת, אבל הגודל מותאם כך שימלא את כל האלמנט. יתכן שתמונת הרקע תשנה את גודלה.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות למודל תיבת ה-CSS מאפייני CSS הקשורים לעיצוב מודל התיבה

מאפייני CSS הקשורים לרקע

YouTube Video

יצירת HTML לתצוגה מקדימה

רקע וקישוטים

מאפיין background-color

הסבר:

מאפיין background-image

הסבר:

סוגי ערכים שניתן להגדיר

נקודות מפתח של מאפיין ה-background-image

מאפיין background-position

הסבר:

סוגי ערכים שניתן להגדיר

המאפיין background-size

הסבר:

סוגי ערכים שניתן להגדיר

מאפיין background-repeat

הסבר:

ערכים שניתן להגדיר

YouTube Video

מאפיין `background-color`

מאפיין `background-image`

נקודות מפתח של מאפיין ה-`background-image`

מאפיין `background-position`

המאפיין `background-size`

מאפיין `background-repeat`