Theme
Primary Color
أكاديمية الزيرو

الدرس 16

صورة الخلفية ومسارها باستخدام background-image

معنى أسماء العناصر والمصطلحات

المعنىStand ForName
صورة خلفية العنصرbackground-image

جهز الصورة والمثال

داخل learn-css اعمل مجلد images جنب مجلد css 

حط فيه صورة باسم pattern.png وتكون صورة صغيرة زي 100 في 100 بكسل علشان تقدر تلاحظ التكرار

وهضيفلك الصورة أهي تستعملها الموجودة في المثال

learn-css/
--- index.html
--- css/
------ master.css
--- images/
------ pattern.png
<div class="box">Background Example</div>

حدد مصدر الصورة

اكتب الكود ده في css/master.css

.box {
  width: 400px;
  height: 250px;
  background-color: lightgray;
  background-image: url("../images/pattern.png");
}

ال url بنكتب جواها مسار الصورة المسار 

هنا بيتحسب من مكان ملف CSS 

العلامة ../ بتطلع من مجلد css وبعدها بندخل images ونختار pattern.png

اللون lightgray موجود تحت الصورة وبيبان في الأجزاء الشفافة أو لو الصورة متحملتش

لو الصورة صغيرة هتلاقيها بتتكرر داخل العنصر وده السلوك الافتراضي 

ملحوظة

لاحظ عرض الصورة 100 بيكسل وعرض العنصر 400 بيكسل والصورة اتكررت بالعرض 4 مرات طول الصورة 100 بيكسل وطول العنصر 250 بيكسل والصورة اتكررت بالطول مرتين ونص

إزالة صورة الخلفية

.box {
  width: 400px;
  height: 250px;
  background-color: lightgray;
  background-image: none;
}

القيمة none بتشيل صورة الخلفية واللون بيفضل موجود

جرب بنفسك

غير الصورة لملف تاني عندك وعدل المسار لو احتاج

آخر تعديل للدرس: