CSS/רקעים

רקע

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

צבע רקע

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

CSS_SELECTOR{
background-color: colorname;
}

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

CSS_SELECTOR{
background: colorname;
}

תמונת רקע

על-מנת ליצור תמונת רקע:

CSS_SELECTOR{
background-image: url(image.ext);
}

(ניתן להגדיר שיהיה תמונת רקע נוספת מתחת לתמונת רקע, ע"י הוספה בסוגריים פסיק ושם הקובץ הנוסף)

כאשר image.ext מסמל את המיקום של התמונה כולל סיומת לדוגמא gif. או png. גם עכשיו אפשר לכתוב רק background:

CSS_SELECTOR{
background: url(image.ext);
}

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

המבנה של מאפיין:

CSS_SELECTOR{
background: url(image.ext) [propery_value[,propery2_value]];
}

repeat

מקבל את הערכים הבאים: repeat-y : מכפיל את התמונה לאורך ציר ה-y, כמספר הפעמים שצריך כדי למלא את האלמנט. repeat-x : כנ"ל רק עם ציר ה-x‏. repeat (ללא ציון x וגם ללא ציון y): גם בציר ה-x וגם בציר ה-y. ‏no-repeat : בכלל לא.

position

left
right
top
bottom

הפרק הקודם: ריווח

רקעים

הפרק הבא: שכבות