صور الخلفية 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>

الدرس السابق الدرس التالي