دورة برمجة مواقع الانترنت - لغة css - الدرس 5 - تنسيق الخلفية Styling Backgrounds - الجزء الثاني

نستكمل معكم ما بدأنا به في الدرس السابق في حديثنا عن تنسيق الخلفية لعنصر ما في صفحة الانترنت
وتحدثنا عن وضع لون ما كخلفية واليوم سنتكلم بشكل وافي عن وضع صورة كخلفية لعنصر ما وهذا الدرس
مهم وسهل من الناحية العملية :

وضع صورة كخلفية Background Image

صيغة الكتابة لوضع خلفية تكون على الشكل التالية :

background-image:url('مسار الصورة')

مثال :
لتكن لدينا الصورة التالية :


ونريد أن تكون هذه الصورة خلفية لصفحة انترنت
ومن أجل تطبيق الخلفية على كامل الصفحة فإننا نطبق التنسيق على الوسم body
والكود يكون كالتالي :

جرب أن تطبق الكود على صفحة محرر الأكواد : http://tahasoft.com/code.htm
ولاحظ أن كامل الخلفية ستملأ بالعشب الموجود في الصورة:



نستنتج أن الحالة الافتراضية لتطبيق صورة في الخلفية هو تكرار الصورة في كامل الخلفية
بالنسبة لمسار الصورة الذي نضعه في الكود كان في المثال السابق هو :
http://img838.imageshack.us/img838/4247/grassy.jpg
وفي حال وجود ملف الصورة بجانب الصفحة فإننا نكتب اسم الصورة
وفي العادة وكنوع من التنسيق يمكن وضع الصور داخل مجلد اسمه Images وداخله الصور



حمل الملف التالي :
http://www.mediafire.com/?8l7w7o5o7nenh5h
وستجد بداخله مثال توضيحي لما يستخدم غالباً بشكل عملي في العمل على تصميم مواقع الانترنت

طرق تكرار صورة الخلفية background-repeat :

لتكرار الصورة بشكل أفقي فقط نضيف :

background-repeat: repeat-x;

مثال :

النتيجة:

نلاحظ تكرار الصورة بشكل أفقي فقط ( على المحور x )
ولتكرار الصورة بشكل عمودي فقط نضيف:

background-repeat: repeat-y;

المثال :

النتيجة :


نلاحظ أنه تم تكرار الصورة بشكل عمودي (على المحور y)

ولعدم تكرار الخلفية نضع :

background-repeat:no-repeat;

في هذه الحالة ستظهر صورة الخلفية بدون تكرار
المثال :

التنجية


ولتكرار الصورة بشكل أفقي وعمودي معاً نضع :

background-repeat:repeat;

أو لا نضع شيء لأنها حالة افتراضية

التحكم بموضع الخلفية background-position :

تستخدم الخاصة : background-position
ولها عدة حالات :
top في الأعلى وبشكل متوسط
bottom يظهر الجزء السفلي من الخلفية وبشكل متوسط في firefox وتظهر في الأسفل في Internet explorer
center في وسط الصفحة تماماً في internet explorer و في الأعلى بشكل متوسط في firefox
right يمين بشكل متوسط في Internet explorer وفي اليمين ويظهر منتصف الصورة السفلي في firefox
left يسار بشكل متوسط في Internet explorer وفي اليسار ويظهر منتصف الصورة السفلي في firefox
ويمكن جمع خاصتين معاً
وما يمكن جمعه من خواص معاً هو التالي :
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
وفي حال وضع خاصة واحدة بشكل عام تكون الثانية هي التوسيط (حاول استخدام اثنتين معاً دوماً للمزيد من التوافق مع متصفحات الانترنت المتخلفة )
مثال :

طه سوفت




tahasoft.com

النتيجة :


وتعمل على المتصفحين بنفس النتيجة

ويمكن وضع رقم مسافة أو نسبة مئية بدلاً من الخواص سابقة الذكر
مثلاً :

background-position: 220px 50%;

أي الإزاحة عن المحور الأفقي x بمقدار 220 بكسل و عن المحور العمودي y بمقدار 50 بالمئة

ملاحظة هامة :
حاول الاتبعاد قدر الإمكان عن التنسيقات التي تظهر بشكل مختلف على المتصفحات و افحص دائماً عملك على عدة متصفحات
وكلما أكثرت المتصفحات كان أفضل و لا تنسى برنامج Ie tester لتحميل آخر إصدار منه : http://www.debugbar.com/download.php
ويفيد في اختبار عمل الصفحة على كافة متصفحات Internt explorer

تثبيت الخلفية

:

في حال وجود صفحة ذات محتويات كثيرة وأردنا تثبيت الخلفية عند تحريك شريط التمرير فيمكن عمل ذلك باستخدام الخاصة background-attachment ونضع لها القيمة fixed
مثال :

tahasoft.com




tahasoft.com




tahasoft.com




tahasoft.com




tahasoft.com




tahasoft.com




tahasoft.com




tahasoft.com




tahasoft.com

حرك الشريط العمودي وستجد الخلفية تبقى في مكانها
وفي بعض المنتديات والمواقع يتم استخدام هذه الخاصة
أما في حال أننا نريدها أن تكون متحركة فإما أن لا نضع شيء أو نضع :

background-attachment: scroll;

الطريقة المختصرة shorthand property

كما رأينا أن تنسيق الخلفية له عدة خصائص يمكن كتابتها معاً
فمثلاً جزء css التالي :

body{

    background-color:#ffffff ;

    background-image: url('http://img838.imageshack.us/img838/4247/grassy.jpg');

    background-repeat: no-repeat;

    background-position: right top;

}

يمكننا اختصاره إلى ما يلي :

body {background:#ffffff url('http://img838.imageshack.us/img838/4247/grassy.jpg') no-repeat right top;}

والطريقة المختصرة محببة لدى المحترفين
ومن المهم جداً معرفة أنه يجب مراعاة ترتيب الخصائص عند استخدام الطريقة المخترة بالترتيب التالي :



فلا يجوز وضع رابط الصورة قبل لون الخلفية على سبيل المثال

في الدرس القادم رح نعمل تطبيق عملي بسيط على ماسبق من خصائص
بالتوفيق للجميع
سلاااااااااام