دروس دورة CSS : شرح الخاصية background-position

بسم الله, الحمد لله

الإخوة و الأخوات اليوم معنا خاصية من أجمل خواص الـ Background وهي التي تحمل العنوان background-position.
هذه الخاصية تمكننا من وضع الصورة التي نضعها في الخلفية في اي مكاناً نريد سواء اعلى او اسفل او يمين او شمال او حتى ما بين ذلك وهذا ما سوف نتعرف عليه الآن من خلال درسنا ..
كما ذكرنا قبلاً خاصية اليوم هي ..

background-position

ويتفرع من هذه الخاصية العديد من الأكواد التي تسمح لنا بالتلاعب بمكان الصورة وهما كالتالي..

background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: 50% 50%;
background-position: 50px 50px;

كثيرين ؟ نعم ولكنهم لا يحتاجون اي احترافية و سوف نكتشف ذلك من خلال تطبيق الكود على المتصفح.
افتح صفحة تكست فارغة واعطها الامتداد html وضع فيها هذا الكود ...

<!DOCTYPE html>
<html>
<head>
<style>
div{
border:5px dotted #0cf;padding:20px;height:200px;width:300px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoS9e_z9UwnNl47st68vXeA-24L6alIJXqkmjrlOaoQzw4_Ihm2LcD_R44Z8ZDCgyrL4mo21r7D9T24Y9f7Zi_c4RTQBft8KaE1zrVG4sU4NcxVlGBZKRKHbZtMGqE4tGnHKz2fonUQnS/w43-h42-no/Smile.png);
background-repeat:no-repeat;
background-position:center center;
background-color:#e5f9ff;
}
</style>
</head>
<body>
<div>
<b>Mini Soft</b> <i>by</i> <u>Ahmad Saleh</u><BR />
<u>Mini Soft</u> <i>by</i> <b>Ahmad Saleh</b>
</div>
</body>
</html>

هذا السطر الآزرق هو الصورة.
السطر البني لعدم تكرار الصورة .
السطر الأحمر هو الكود الخاص بنا الذي يجعل الصورة بالمنتصف .
والان بعد حفظ الكود في صفحة html افتحها على المتصفح لتشاهد التالي ..

انظر الوجة المبتسم ( الصورة ) في المنتصف تماماً هذا لأن الكود كان center center

وهنا نستنج ان الأكواد الأخرى تتحكم في مكان الصورة كالتالي ..

background-position: left top; يجعل الصورة بالاعلى على اليسار
background-position: left center; يجعل الصورة بالمنتصف على اليسار
background-position: left bottom; يجعل الصورة بالاسفل على اليسار
background-position: right top; يجعل الصورة بالاعلى على اليمين
background-position: right center; يجعل الصورة بالمنتصف على اليمين
background-position: right bottom; يجعل الصورة بالاسفل على اليمين
background-position: center top; يجعل الصورة بالمنتصف بالاعلى
background-position: center center; يجعل الصورة بالمنتصف تماماً
background-position: center bottom; يجعل الصورة اسفل بالمنتصف
background-position: 50% 50%; يجعل الصورة بالمنتصف تماماً
background-position: 50px 50px; هذا الكود يتكون من رقمين , الرقم الأول يترك المساحة من العرض , الرقم الثاني يترك المساحة من الارتفاع ثم يتم وضع الصورة

و الآن دعونا نقوم باستبدال السطر الأحمر في الكود الذي قُمنا بوضعه في صفحة html بهذه الأكواد كود وراء الآخر و نرى ماذا يفعل ,, انظر الصور التالية و سوف نقوم بكتابة اسم الكود المستخدم اسفل كل صورة
..