الدرس33 : تطبيق صورة الخلفية في css

صورة الخلفية:

سنتعلم اليوم كيف نظيف صورة كخلفية لموقع بذلا من الألوان. أنا سأشرحها كخلفية للموقع لكن يمكنك أنت وضعها كخلفية لعنوان أو نص أو ما تشاء. لإظافة خلفية نستعمل background-image و نعطيها قيمة ("url ("image.png  فتصبح هكذا:

body
{
background-image: url("word.png");
}

وهذا ما تبينه الصورة التالية:

و كما نرى تمة إضافة تلك الصورة كخلفية.

يمكنك إضافة الصورة من ملفات موقعك أو عن طريق رابط الصورة إن لم تفهم ما أقول عليك مراجعة هذا الدرس. و دروس الروابط الأخرى.

الخيارات المتاحة لصورة الخلفية css :

تتيح لنا css التغيير على صورة الخلفية بعدة طرق ندكر منها:

background-attachment وهي طريقة تسمح لنا بإقاف الصورة و النص فقط هو الذي يصعد وينزل وتأخد قيمتين:

- fixed : الصورة تبقى تابتة.

- scroll : عادي كجميع المواقع الصورة تتحرك مع النص.

body
{
background-image: url("neige.png");
background-attachment: fixed;
}

background-repeat إدا لم تعمل بهذه القيمة فالصورة تكرر في جميع الإتجاهات كالموزاييك. لكن يمكنك تكرار الصورة في الإتجاه الدي تريده فقط بإعطائها القيم التالية:

- no-repeat : الصورة ستظهر مرة واحدة.

- repeat-x : الصورة تكرر أفقيا.

- repeat-y : الصورة تكرر عموديا .

- repeat : افتراضي الصورة تكرر في جميع الإتجاهات.

body
{
background-image: url("lune.png");
background-repeat: no-repeat;
}

background-position هده تعمل فقط مع no-repeat نعتيها قيمتان يطرجمان إنطلاقا من أعلى يسار الصفحة.

background-position: 30px 50px;

وتعني 30px إلى اليسار و 50px إلى الأعلى.

ويمكن أيضا بالأسماء الإنجليزية كأن تكتب:

background-position: top right;

وبهده الطريقة متلا سأضيف قمرا لموقعي في الخلفية:

body
{
background-image: url("lune.png");
background-attachment: fixed;
background-repeat: no-repeat; 
background-position: top right; 
}

الجمع بين خصائص background :

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

body

{

background: url("soleil.png") fixed no-repeat top right;

}

وهذ جميل لتقليص حجم صفحة css .

أكتر من صورة في الخلفية css :

جاءت هذه الخاصية مع css3 و هي جديدة ولاحظ كيف سأجمع بين الصورتين:

body
{
background: url("lune.png") fixed no-repeat top right,
url("image.png") fixed;
}

الصورة الأولى هي التي تكون فوق والتانية تحت. لو قلبتهم فقد تضهر لك صورة واحدة إن كانت كبيرة وهذه النتيجة:

تعمل هذه الطريقة مع جميع المتصفحات إلا IE القديمة إبتداأ من IE9. أنا قمت بعمل على الصفحة ككل يمكنك أنت أن تعمل على عنوان أو أي شيء.