صور الخلفية Background Images HTML

الدرس السابق الدرس التالي
 صور خلفية  HTML
يمكن تحديد صورة الخلفية (background-image) لأي عنصر HTML تقريبًا.
صورة الخلفية على عنصر Background Image on a HTML element
لإضافة صورة خلفية إلى عنصر HTML ، استخدم سمة نمط (style attribute) HTML وخاصية صورة الخلفية (background-image property)  لـ CSS:
مثال 
<!DOCTYPE html>
<html>
<body>
 
<h2>Background Image</h2>
 
<p>صورة خلفية لعنصر div:</p>
 
<div style="background-image: url('https://www.w3schools.com/html/img_girl.jpg');">
يمكنك تحديد صور الخلفية <br>
لأي عنصر HTML مرئي. <br>
في هذا المثال ، صورة الخلفية <br>
محدد لعنصر div. <br>
بشكل افتراضي ، صورة الخلفية <br>
سيكرر نفسه في الاتجاه (الاتجاهات) <br>
حيث يكون أصغر من العنصر <br>
حيث تم تحديده. (حاول تغيير حجم <br>
نافذة المتصفح لنرى كيف <br>
صورة الخلفية تتصرف.
</div>
 
<p>صورة خلفية لعنصر p:</p>
 
<p style="background-image: url('https://www.w3schools.com/html/img_girl.jpg');">
يمكنك تحديد صور الخلفية <br>
لأي عنصر HTML مرئي. <br>
في هذا المثال ، صورة الخلفية <br>
محدد لعنصر div. <br>
بشكل افتراضي ، صورة الخلفية <br>
سيكرر نفسه في الاتجاه (الاتجاهات) <br>
حيث يكون أصغر من العنصر <br>
حيث تم تحديده. (حاول تغيير حجم <br>
نافذة المتصفح لنرى كيف <br>
صورة الخلفية تتصرف.
</p>
 
</body>
</html>

أضف صورة خلفية إلى عنصر HTML:
يمكنك أيضًا تحديد صورة الخلفية في عنصر <style> في قسم <head>:
مثال
حدد صورة الخلفية في عنصر <style>: 
 
  <!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
}
</style>
</head>
<body>
 
<h2>Background Image</h2>
 
<div>
يمكنك تحديد صور الخلفية <br>
لأي عنصر HTML مرئي. <br>
في هذا المثال ، صورة الخلفية <br>
محدد لعنصر div. <br>
بشكل افتراضي ، صورة الخلفية <br>
سيكرر نفسه في الاتجاه (الاتجاهات) <br>
حيث يكون أصغر من العنصر <br>
حيث تم تحديده. (حاول تغيير حجم <br>
نافذة المتصفح لنرى كيف <br>
صورة الخلفية تتصرف.
</div>
 
</body>
</html>

صورة الخلفية على الصفحة Background Image on a Page
إذا كنت تريد أن تحتوي الصفحة بأكملها على صورة خلفية ، فيجب عليك تحديد صورة الخلفية في عنصر <body>:
مثال
أضف صورة خلفية للصفحة بأكملها: 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
}
</style>
</head>
<body>
 
<h2>Background Image</h2>
 
<p>بشكل افتراضي ، ستكرر صورة الخلفية نفسها إذا كانت أصغر من العنصر المحدد ، في هذه الحالة عنصر الجسم.</p>
 
</body>
</html>

تكرار الخلفية Background Repeat
إذا كانت صورة الخلفية أصغر من العنصر ، فستكرر الصورة نفسها أفقيًا وعموديًا حتى تصل إلى نهاية العنصر:
مثال:
 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/example_img_girl.jpg');
}
</style>
</head>
<body>
 
<h2>Background Repeat</h2>
 
<p>بشكل افتراضي ، ستكرر صورة الخلفية نفسها إذا كانت أصغر من العنصر المحدد ، في هذه الحالة عنصر الجسم.</p>
 
</body>
</html>

لتجنب تكرار صورة الخلفية ، اضبط خاصية تكرار الخلفية (background-repeat) على عدم التكرار(no-repeat).
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
</head>
<body>
 
<h2>Background No Repeat</h2>
 
<p>يمكنك تجنب تكرار الصورة عن طريق تعيين خاصية تكرار الخلفية على "عدم التكرار".</p>
 
</body>
</html>

غلاف الخلفية Background Cover
إذا كنت تريد أن تغطي صورة الخلفية العنصر بأكمله ، فيمكنك تعيين خاصية حجم الخلفية(background-size) لتغطيتها(cover.).
أيضًا ، للتأكد من تغطية العنصر بالكامل دائمًا ، اضبط خاصية مرفق الخلفية (background-attachment) على ثابت(fixed):
بهذه الطريقة ، ستغطي صورة الخلفية العنصر بأكمله ، بدون تمدد (ستحتفظ الصورة بنسبها الأصلية):
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>
 
<h2>Background Cover</h2>
 
<p>اضبط خاصية background-size على "cover" وستغطي صورة الخلفية العنصر بأكمله ، وفي هذه الحالة عنصر body.</p>
 
</body>
</html>

امتداد الخلفية Background Stretch
إذا كنت تريد أن تمتد صورة الخلفية لتلائم العنصر بأكمله ، فيمكنك تعيين خاصية حجم الخلفية (background-size) إلى 100٪ 100٪:
حاول تغيير حجم نافذة المتصفح ، وسترى أن الصورة ستمتد ، لكنها ستغطي العنصر بأكمله دائمًا.
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
</head>
<body>
 
<h2>Background Stretch</h2>
 
<p>اضبط خاصية حجم الخلفية على "100٪ 100٪" وسيتم تمديد صورة الخلفية لتغطية العنصر بأكمله ، في هذه الحالة عنصر الجسم.</p>
 
</body>
</html>
الدرس السابق الدرس التالي
القسم: