التحكم في الخلفيات (2)

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

صبــاحكمـ | مســائكـمـ معــطر بـذكـر الرحمـن

[size=21]أتمــنى ان تكـونوا في أحسن حال وأهنـاهـ أعضاء مصممي الكرام ..

/
\

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
أهــداف الدرس:

التعرف على اكواد التحكم في الخلفيات

الأكواد التي سنتطرق اليها في هذا الدرس..

background-repeat
background-attachment
background-position
background

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

background-repeat

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

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

كود PHP:
background-repeat: repeat;

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

كود PHP:
background-repeat: repeat-x;

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

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

كود PHP:
background-repeat: repeat-y;

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

كود PHP:
background-repeat: no-repeat;

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

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

كود PHP:
body {
background-image: url('bg.gif');
background-repeat: repeat;
}

[center][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

background-attachment

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

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

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

كود PHP:
background-attachment: scroll;

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

كود PHP:
background-attachment: fixed;

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

background-position

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

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

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

بمعنى

اذا كتبنا

كود PHP:
background-position: 50 px 10px;

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

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

top
bottom
center
left
right

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

مثال:
اريد الخلفية ان تكون اعلى يمين المتصفح

كود PHP:
background-position: Top Right;

[center][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

background

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

توفر الكثير من الوقت في كتابة الأكواد ..

مثال:
نريد ان نجعل الخلفية صورة وخلفها لون ابيض وتكون ثابتة غير متحركة وفي نصف الصفحة تماما ..

سيكون الكود كالتالي:

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

[center]جمعنا فيها كل الخصائص كنوع من اختصار عدد السطور..

ترتيب الكود بيكون دايما بهذه الطريقة بعد ذكر background:

background-color | background-image | background-repeat | background-attachment | background-position

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

[center]دمــتم في حــفظ الرحــمن ووداعــته ،،
[/center]
[/center]
[/center]
[/center]
[/center]
[/center]
[/center]
[/center]
[/center]

» التحكم فى الخيارات ظاهره بلوحة التحكم
» كود التحكم فى حجم الصور
» التحكم فى الصلاحيات الخاصة للأزرار
» كود التحكم في تكبير وتصغير الصور بالمساهمات وجعلة مثل الــ vb
» كود التحكم بأسهم مكانك بالمنتدي ( الملاحة )