HTML Background Images
-
يمكن في HTML وضع خلفية صورة تقريبا لمعظم HTML elements ، في هذا الدرس بتعرف على كيفية عمل ذلك، بالإضافة الى بعض الخصائص الممكن تطبيقها على ذلك.
تمام نطبق المثال التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
color: white;
}
</style>
</head>
<body>
<div style="background-image: url('img.jpg');">
<p >
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
يمكن أيضا تطبيق الصورة كخلفية في inline CSS
للتذكير inline CSS هو كتابة كود CSS في صفحة HTML في جزء خاص ب CSS في Head
طبق الكود التالي بدل السابق:
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
color: white;
background-image: url('img.jpg');
}
</style>
</head>
<body>
<div >
<p >
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</div>
</body>
</html>
شوف النتيجة بتكون نفس النتيجة السابقة.
طيب تمام نتعلم الان بعض الخصائص الخاصة بالصورة في الخلفية.
الوضع الافتراضي يقوم HTML بتكرار الصورة حتي يغطي جميع element المطلوب إضافة صورة خلفيه له.
تطبيق صورة خلفية لكامل الصفحة
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url('img.jpg');
}
p{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
color: white;
}
</style>
</head>
<body>
<div >
<p >
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</div>
</body>
</html>
شوف النتيجة:
لاحظ الصورة تم تكرارها لتغطي كامل الصفحة واكيد هذا التكرار حسب حجم الصورة بمعنى إذا كانت حم الصورة كافي حتي يغطي element فا اكيد ما في حاجه الى التكرار، التكرار بكون بشكل افقي horizontally وعمودي vertically.
إذا كان المطلوب عرض الصورة كما هي دون تكرار نتعلم كيف في الجزء التالي
لمنع تكرار الصور نستخدم الكود:
background-repeat: no-repeat;
نعدل على الكود السابق الى:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-repeat: no-repeat;
}
p{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
color:black;
}
</style>
</head>
<body>
<div >
<p >
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
لاحظ الصورة تم عرضها مره واحده بحجمه الأصلي.
طيب تمام في مثل هيك حالة إذا كان المطلوب عرض الصورة لتغطي الصفحة كاملة دون تكرار. الامر بسيط جدا تابع الدرس لنتعلم كيف بنعمل ذلك.
Background Cover
لتغطية الصورة لكامل element دون تكرار نستخدم الامر :
background-size: cover;
background-attachment: fixed;
في هذه الطريقة يتم عرض الصورة بشكل كامل كخلفية ل element مع المحافظة على قياسات الصورة الأصل .
تمام طبق الكود التالي ف صفحة HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
p{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
color:black;
}
</style>
</head>
<body>
<div >
<p >
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
لاحظ انه لم يحدث أي امتداد للصورة Stretch عند تطبيقها بهذه الطريقة.
تغيير حجم الصورة في الخلفية Stretch
يمكن التحكم بحجم الصورة في الخلفية من حيث الطول والعرض لكن يجب الانتباه هنا الى ان أي تغيير في الطول او العرض ممكن يعمل مشكلة في حجم الصورة (يعني بعمل تمدد Stretch للصورة)
لتطبيق ذلك نستخدم الكود:
background-size: 100% 100%;
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-size: 100% 100%;
}
p{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
color:black;
}
</style>
</head>
<body>
<div >
<p >
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.<br>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
</div>
</body>
</html>
شوف النتيجة وراسلنا اذا عندك ملاحظات او اسئلة
طبعا النتيجة مختلفة حسب حجم الصورة الأصل
اترك تعليقك