كيفية عمل صورة خلفية على موقع على شبكة الإنترنت

جدول المحتويات:

كيفية عمل صورة خلفية على موقع على شبكة الإنترنت
كيفية عمل صورة خلفية على موقع على شبكة الإنترنت

فيديو: كيفية عمل صورة خلفية على موقع على شبكة الإنترنت

فيديو: كيفية عمل صورة خلفية على موقع على شبكة الإنترنت
فيديو: تعلم css : كيفية وضع صورة كخلفية للصفحة | Background-Image 2024, أبريل
Anonim

يمكنك تعلم أساسيات بناء الموقع بنفسك ؛ هناك معلومات كافية حول هذا الموضوع على الإنترنت والكتب. ومع ذلك ، في المرحلة الأولية ، غالبًا ما تنشأ صعوبات في استخدام علامة أو أخرى. في الواقع ، من الأفضل تذكر المكونات الأكثر شيوعًا لأنها ضرورية عند كتابة أي موقع ويب.

كيفية عمل صورة خلفية على موقع على شبكة الإنترنت
كيفية عمل صورة خلفية على موقع على شبكة الإنترنت

تعليمات

الخطوة 1

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

الخطوة 2

قم بتصحيح الصورة باستخدام Adobe Photoshop. عند الانتهاء ، اختر الأمر Save For Web من قائمة File وحدد المجلد الذي تريده. إذا كانت هذه هي الصورة الأولى التي سيتم استخدامها للموقع ، فسيتم إنشاء مجلد "صور" تلقائيًا.

الخطوه 3

في العلامة ، اكتب background = "path to image" السمة. سجل مثال: أو. في الوقت نفسه ، ضع في اعتبارك أن العلامة يجب أن تظهر مرة واحدة فقط في الشفرة ، ولا ينبغي مضاعفتها.

الخطوة 4

احفظ التغييرات في المفكرة ، انقر فوق الزر "تحديث" في المتصفح. ستظهر الخلفية على الشاشة. إذا كانت أبعاد الصورة أصغر من معلمات صفحة الويب ، فسيتم تكرار الصورة عدة مرات حسب الضرورة لملء المساحة بأكملها. هناك طريقتان لتصحيح هذا النقص:

• باستخدام برنامج Adobe Photoshop ، اضبط معلمات الصورة المطلوبة بالبكسل ("صورة" - "حجم الصورة") ؛

• ضبط الأبعاد المطلوبة في كود html.

على سبيل المثال ، إذا كان العرض 1250 بكسل ، وكان الارتفاع 650 بكسل ، فأنت بحاجة إلى إضافة السمات الضرورية لخلية الجدول التي سيتم وضع الصورة فيها.

لا يمكنك تعيين الحجم في العلامة - سيتم دائمًا عرض الصورة بالحجم الكامل.

الخطوة الخامسة

التناظرية من ccs لإدراج صورة خلفية:

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

الجسم {

صورة الخلفية: url (images / bg.jpg) ؛

}

السمة "background-image: url (images / bg.jpg)" هي المسار إلى صورة الخلفية.

موصى به: