צבעים ורקעים

צבע רקע

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

body {background-color: #24A8D0;}

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

body {background-color: blue;}

תמונת רקע

באמצעות קוד CSS ניתן לשלב תמונת רקע באתר, כמו שאנחנו מוסיפים את התמונות בקוד HTML ניתן לעשות זאת גם באמצעות CSS ע"י הוספת האלנטים הבאים:

body {background-image: url("images/logo.png");}

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

background-repeat: repeat-x – התמונה חוזרת אופקית

background-repeat: repeat-y – התמונה חוזרת אנכית

background-repeat: no-repeat – התמונה מופיע פעם אחת

ניתן להגדיר אורך ורוחב לתמונה באמצעות הפקודות הבאות:

width:32px;height:32px;

לסיכום

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

h1 {color: #24A8D0;}
body {background-color: #24A8D0;}
body {background-image: url("images/logo.png");width:32px;height:32px;background-repeat: repeat-x}