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

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



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




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

Code:

<div style="background-image: url('images/stories/key.jpg')">

من أجل خلفية لونية:

Code:

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

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


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




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

Code:

<div style="background-image: url('images/stories/key.jpg');background-repeat:no-repeat;">

فعند الحفظ ستجد أن الخلفية أصبحت عبارة عن صورة واحدة، ولكنها ليست في الوسط، فإن كنت تريد توسيطها، أضف background-position:center center; 
ليصبح الكود النهائي بالشكل:

Code:

<div style="background-image: url('images/stories/key.jpg');background-repeat:no-repeat;background-position:center center;">

اضغط (Update) وتحقق من النتيجة...


تحياتي