Page 1 of 1

تعلم إضافة صورة كخلفية لمقال

Posted: Sat Jan 22, 2011 10:45 pm
by fares5shm

مرحباً:
يمكنكم زيادة جمال صفحات الموقع ومقالاته، وإعطاء كل واحدة منها رونقها الخاص دون الحاجة إلى استخدام عدة قوالب، وإنما من خلال وضع خلفية تتناسب وموضوع المقال، قد تكون هذه الخلفية صورة أو لون...
والطريقة هي التالية:
- بداية، من البديهي أن تكون قد رفعت الصورة التي تريدها أن تكون خلفية المقال إلى مجلد خاص تنشئه لخلفيات المقالات، أو إلى مجلد الصور الخاص بجملة!
- اذهب إلى مدير المقالات، ومن ثم ادخل إلى المقال الذي تريد أن تضيف له الخلفية. ضمن محرر جملة! اضغط على الزر "Edit HTML Source":
Image


فستجد أنه قد ظهرت لك نافذة منبثقة، تحوي كود المقال بلغة HTML:

Image


ضع في بداية هذا النص تماماً الكود التالي:
من أجل خلفية كصورة:

Code: Select all

<div style="background-image: url('images/stories/key.jpg')"> 
من أجل خلفية لونية:

Code: Select all

<div style="background-color: #dddddd"> 


وبالطبع يمكنك تغيير الكودين السابقين ليتناسبا مع احتياجاتك، مع ملاحظة أنك لست بحاجة لإضافة </div> في نهاية نص الـ HTML لأن المحرر سيقوم بذلك عوضاً عنك...


حالما تضيف الكود وتضغط على الزر (Update) في النافذة السابقة ستجد أن الصورة قد ظهرت مباشرة ضمن المحرر ، ولكنها تكون متكررة بحيث تملأ مساحة المقال كاملاً، لاحظ الشكل:
Image



ففي حال كان هذا الأمر يفي بالغرض بالنسبة لك، أي أن تكرار الصورة مناسب لغايتك، فتهانينا!
أما في حال أردت أن تضع صورة وحيدة، فقم بالتالي:
أضف background-repeat:no-repeat; إلى الكود السابق ليصبح بالشكل:

Code: Select all

<div style="background-image: url('images/stories/key.jpg');background-repeat:no-repeat;"> 
فعند الحفظ ستجد أن الخلفية أصبحت عبارة عن صورة واحدة، ولكنها ليست في الوسط، فإن كنت تريد توسيطها، أضف background-position:center center;
ليصبح الكود النهائي بالشكل:

Code: Select all

<div style="background-image: url('images/stories/key.jpg');background-repeat:no-repeat;background-position:center center;"> 
اضغط (Update) وتحقق من النتيجة...
Image

تحياتي
[/right]

Re: تعلم إضافة صورة كخلفية لمقال

Posted: Sat Jan 22, 2011 10:53 pm
by suneye
مرحباً أخي فارس،

سلمت يداك على هذه المعلومات الأساسية والمفيدة

ننتظر منك المزيد حول css

مع تحياتي

Re: تعلم إضافة صورة كخلفية لمقال

Posted: Mon Jan 31, 2011 12:26 pm
by ammory
تسلم ايدك... موفق بإذن الله

Re: تعلم إضافة صورة كخلفية لمقال

Posted: Thu Mar 10, 2011 6:01 pm
by Si7s
رائع يا فارس مميز دائماً , بالتوفيق