بسم الله الرحمن الرحيمسنتحدث في هذا الموقع عن عدد من الأساسيات الهامة فى عملية تصميم و تركيب خلفية الموقع .. و ليس المقصود بالخلفية هى صورة الخلفية كما الحال في سطح المكتب للكمبيوتر و تغير صورة بصورة أخرى و لكن سنتحدث عن عملية التركيب الكامل لخلفية الموقع من خلال عدد من العناصر المختارة selectors و التتويجات declarations و المتغيرات properties
1. لون الخلفية background-color
2. صورة الخلفية background-image
3. تكرار الخلفية background-repeat
4. موضع الخلفية background-position
هذا هو المثال الذى سنجرب عليه المتغيرات
<p id='main'>مدونة عالم نت</p>
<p id='main2'>عالم نت</p>
أولا: لون الخلفية background-color
يستخدم هذا المتغير background-color ليحدد لون خلفية الموقع و يستخدم معه العنصر المختار حسب الجزء الذى تريد أن يظهر به اللون ...
#main {background-color: orange;}
#main2 {background-color: yellow}
فتكون كالتالى
مدونة عالم نت
عالم نت
و إذا أردت أن تجعل لون الخلفية للموقع ككل تستخدم العنصر body كالتالى
body {background-color: red;}
أما عن الالوان هناك ثلاثة طرق لكتابتها و هى
- إسم اللون مثل red , green , yellow .....
- كود اللون مثل FFFFFF# و هى للون الأبيض .. أكواد الألوان كاملة
- القيمة RGB للون مثل (255,255,255)rgb و هى للون الابيض .. أكواد الألوان كاملة
ثانيا: صورة الخلفية background-image
و يستخدم هذا المتغير background-image ليحدد صورة معينى للخلفية يمكنك تحيد حجمها مسبقا و وضعها خلفيه للموقع أو جعل الصورة متكررة حتى تغطى سطح الموقع بالكامل
و تستخدم كالتالى
#main {background-image: url('image.png');}
و تستبدل image.png برابط الصورة
#main {background-image: url(http://hitskin.com/themes/18/90/15/i_background.png);}
فتكون كالتالى
مدونة عالم نت
عالم نت
إذا أردنا أن نجعل الصورة خلفية للموقع ككل و ليس جزءا محددا نستخدم
body {background-image: url('image.png');}
ثالثا: تكرار الخلفية background-repeat
يستخدم هذا المتغير لتحديد تكرار الخلفية سواء رئسيا أو أفقيا حسب الحاجة حتى تملئ الصورة الموقع بالكامل
إن تكرار الخلفية هو أمر طبيعى يحدث تلقائيا حتى دون وضع هذا العنصر و هذا التكرار يكون أفقيا و رأسيا في نفس الوقت الإ أن بعض الخلفيات إذا تكررت بصورة رئسية أعطت شكلا سيئا و أيضا هناك صور إذا تكررت بشكل أفقى تطعى شكلا غير جيدا .. لذلك نستخدم هذا المتغير لضبط التكرار
لذا نستخدم repeat-x للتكرار الأفقى , و نستخدم repeat-y للتكرار الرأسى
و تكون كالتالى و توضع ضمن العنصر المختار كما ذكرنا سابقا
{background-repeat: repeat-x;}
{background-repeat: repeat-y;}
رابعا: موضع الخلفية background-position
تستخدم هذه القيمة لتحديد موضع الصورة في الخلفية أو في صفحة معينة من صفحات موقعك و يتم وضع قبلها العنصر المختار و هى كالتالى
{background-position: right top;}
و يتم تغير right top حسب الموضع الذى تريده
و هى غالبا تستخدم معها القيمة background-repeat في صورة no-repeat لمنع تكرار الصورة .(حيث أن عملية التكرار تلقائية) لذلك تستخدم لمنع التكرار
{background-repeat: no-repeat;}
هذه القيم يمكنك إستخدامها جميعا و منفردة أو تستخدم قيمة واحده فقط حسب رغبتك
جميع هذه القيم يمكن إختصارها بصورة بسيطة و سهلة كالتالى
{background:#ffffff url('image.png') no-repeat right top;}
و يوضع قبله العنصر المختار
أزال أحد مشرفي المدونة هذا التعليق.
ردحذف