السـلام عليـكم ورحمـة اللـهـ وبركـاتهـ ..

الـيكم هـذا الشـرح الذي أتـمنى ان يكون شامل لكل أنواع الخلفيات التي نستخدمها في تصميم المواقع ..




نبدأ باسم اللـهـ




شـرح سريع لأنواع الخواص الخاصة بالخلفيات ..


Background-color

وهو اعطاء لون لخلفية اي وسم ..


كود:
كود:
Background-color: #ffffff;



Background-image

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

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


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




background-repeat

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

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


كود:
كود:
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 يتحكم في عرض وارتفاع الصورة على حسب الديف ..

مثال حـي



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

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