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

!مختارات من المشاركات الهامة و الدروس المتنوعة الخاصة بجوملا

Moderator: sherif

fares5shm
Joomla! Ace
Joomla! Ace
Posts: 1908
Joined: Wed Oct 22, 2008 12:15 pm
Location: مدينة محردة - سوريا

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

Postby fares5shm » Sat Jan 22, 2011 10:45 pm

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

تحياتي

Last edited by fares5shm on Sat Jan 22, 2011 11:19 pm, edited 2 times in total.

الدليل السريع في الاستفسار السليم:
viewtopic.php?f=560&t=337250
قوانين المنتدى:
viewtopic.php?f=17&t=6414


User avatar
suneye
Joomla! Hero
Joomla! Hero
Posts: 2676
Joined: Sat Jan 12, 2008 6:00 pm
Location: Damascus - Syria
Contact:

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

Postby suneye » Sat Jan 22, 2011 10:53 pm

مرحباً أخي فارس،

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

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

مع تحياتي
Mahmood Alhaj Kassem _ محمود الحاج قاسم
Arabic Joomla! Translation Coordinator and Arabic forum moderator.
http://joomlacode.org/gf/project/arabic_unitag/

ammory
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Wed Dec 29, 2010 6:33 am

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

Postby ammory » Mon Jan 31, 2011 12:26 pm

تسلم ايدك... موفق بإذن الله

Si7s
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Sat Dec 11, 2010 8:05 pm
Location: Egypt
Contact:

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

Postby Si7s » Thu Mar 10, 2011 6:01 pm

رائع يا فارس مميز دائماً , بالتوفيق
تسويق أون لاين
لخدمات التسويق الأليكترونى

http://www.taswiqonline.com


Return to “الدروس”

Who is online

Users browsing this forum: No registered users and 1 guest