كل ما تريد معرفته عن استخدام الخلفيات

Background-color: #ffffff;

نستخدمها لإضافة خلفية صورة لأي عنصرأو وسم ..

طريقة الكتابة:

Background-image: url('رابط الصورة');

هذه الخاصية تتحكم في تكرار صورة الخلفية

وتأخذ هذه الخاصية اربع قيم مختلف ..

background-repeat: repeat;

عند استخدام هذه القيمة ، الخلفية ستتكرر افقيا وعامودية ..
الخلفيات تتكرر أساسا تلقائي عند وضعها بدون أي شروط .. ولكن يفترض وضعها للتأكيد ..

background-repeat: repeat-x;

عند استخدام هذه القيمة ، الخلفية ستتكرر افقيا فقط ..

ملاحظة: يستخدم هذا الكود دائما في الخلفيات التدريجية الأفقية،،

background-repeat: repeat-y;

عند استخدام هذا الكود ، ستتكرر الخلفية عاموديا فقط ..

background-repeat: no-repeat;

هنا لن تتكرر الخلفية في اي اتجاه ..




background-attachment

تعني التحكم في تحريك الخلفية

باستخدام هذه الخاصية نستطيع ان نتحكم فيما اذا كنا نريد تحريك الخلفية او ابقائها ثابتة

تأخذ هذه الخاصية قيمتين ..

background-attachment: scroll;

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

background-attachment: fixed;

نستخدمها اذا اردنا ابقاء الخلفية ثابتة والمحتوى هو المتحرك ..



background-position

نستخدمها لتحديد مكان معين للخلفية

لاحظ دائما ان القيمة الافتراضية او المكان الافتراضي للخلفية هو أعلى يسار المتصفح..
ولهذا تمكنك خاصية البوسيشن من وضع الخلفية في اي مكان تريده في الصفحة ،،

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

بمعنى

اذا كتبنا

background-position: 50px 10px;

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


يمكنك تحديدها أيضا باستخدام هذهـ القيم :


top
bottom
center
left
right


أو القيم بالبكسل او النسبة المئوية..



هذا كل ما يخص الخلفيات في الـ css

*********************************

هناك ما يسمى بالـ Background shortened
أي تعني اختصارات الأكواد الخاصة بالخلفيات وجعلها كلها في سطر واحد ,,

وستكون أماكنها كالتالي ..



Background: background-color background-image background-repeat background-attachment background-position

مثال عليها ..

background: #ffffff url('bg.gif') no-repeat fixed center;

يارب تكونو فهمتو هالنقطة ،،

ملاحظة هامة:
الاختصارات مفضلة جداآ عند كتابة اكواد الـ css لأنها تسرع من قراءة ملف الاستايل وأيضا تعمل على تصغير حجمـه .. فحاول استخدامها في أغلب الخواص مثل الحدود والحاشية والحشو وهكذا ،،



أمثلة واستخدامات مختلفة للخلفيات ..

هنا في الأمثلة سأستخدم طريقة الاختصار .. علشان تتعودو عليها


خلفية متكررة ..

body{background:#fff url('12.png') repeat;}

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

اصنع أولا أي تدريج أفقي تريده بدون خلفية أو بلون الخلفية التي ستضعها في الكود

body{background:#fff url('grad1.png') repeat-x top;}

انشأ تدريج عامودي على الفوتوشوب ..

body{background:#fff url('grad2.png') repeat-y right;}

في هذا المثال استخدمت تدريج ناحية اليمين لهذا استخدمت right

مثـال حـي



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

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

body{background:#000 url('Pink___by_PinkyPinkee.jpg') no-repeat fixed center;}

في هذا المثال تم توسيط الخلفية واستخدمنا fixed لتثبيتها

مثال حـي


استخدام scroll
مثل ما قلنا هي خاصة تلقائية .. و
في هذا المثال وضعنا خلفية تتكرر عاموديا كلما ظهر السكرول وزاد المحتوى

يمكنك أن تختار no-repeat
كله على حسب حاجتك وتصميمك ..

body{background:#fff url('Pink___by_PinkyPinkee.jpg') repeat-y scroll;}

1- أغلب الخلفيات ذات الصورة الواحدة التي لا تتكرر في أي اتجاه..تظهر بحالة جيدة وتملا الصفحة في ريسووليوشن أقل من 1280..
واذا زادت عن ذلك ستأخذ اللون اللذي وضعته في خصائص الخلفية ..

مثال:
خلفية عرضها 800 بيكسل ..
ستظهر طبيعية في شاشات 800*600
والأكبر ستظهر هكذا ,,

هنــآ

لذلك يجب أن تنتبه خلال وضعك لخلفيات كبيرة تملأ الشاشة .. ان تصمم خلفيات بعرض لا يقل عن 900 بيكسل ..

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

مثال ..
هنا صممت خلفية بمقاس 950 بيكسل أطرافها موحدة باللون الأسود ..

هنــآ

/
\

2- يمكن استخدام خصائص التموضع بأكثر من جهة ..
مثلا تريد وضع خلفية في أعلى يمين الصفحة أو خلفية لديف .. ستكتب كود الخلفية وتستخدم top right
أو مثلا في أسفلها يسار بتكون .. left bottom وهكذا


/
\


3- اذا أردت أن تجعل صورة تتمدد بعرض الصفحة مهما كان عرضها او دقتها ..

يجب أن تضع ديف خاص بالخلفية .. وتجعل عرضها 100% وارتفاعها كذلك ..
وأيضا تجعل وسمي html & body = 100%

على شـرط ..
أن تكون الخلفية أكثر من 1400 بيكسل ..


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

ننشأ ديف خاص بالخلفية ونضع بداخلها صورة ..

أكواد هتمل

<div id="bg">    <img src="0004.jpg" class="resize" alt="" /></div>

أكواد css

html{overflow:hidden; /* اخفاء السكرول بار في الاكسبلور*/height:100%;}body{margin:0;padding:0;width:100%;height:100%;overflow-y:auto;/*  لإخفاء السكرول بار في الاكسبلورر الا عند الحاجة*/}#bg {    width: 100%;     height: 100%;     position: absolute;     top: 0;     z-index: 0; /*لجعل الصورة كالخلفية بحيث انك تستطيع وضع أي محتويات فوقها*/    }.resize {    width:100%;    height:auto;}

هنا جعلنا وسمي الهتمل والبودي لها ارتفاع 100% ..
وأضفنا كود لإزالة السكرول البار الذي يظهر في الاكسبلورر فقط ..
ووضعنا في ID الخاصة بديف الخلفية .. العرض والارتفاع 100% .. واخترنا وضع الديف absolute وطبقتها 0 اللي هو z-index

وأنشأنا كلاس resize يتحكم في عرض وارتفاع الصورة على حسب الديف ..

مثال حـي



ان شاء الله ما أكون نسيت أي نقطة خاصة بالخلفيات ..

أتـمنى ان يكون الموضوع قد أفـادكم ..