كيفية إضافة صورة خلفية لصفحة ويب. صورة الخلفية

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

صنع الخلفية

قبل إنشاء خلفية موقع الويب بتنسيق html، يجب عليك فتحه محرر النص كود أتش تي أم ألالصفحات. عليك أن تتذكر أن العلامات الموجودة على الصفحة يتم وضعها عموديًا. ثم بين العلامات … ، عليك أن تضع علامة- هذه العلامات ضرورية لتوضيح نمط عناصر صفحة ويب معينة. في المنطقة ثلاث نقاطأنت بحاجة إلى الكتابة – الجسم (الخلفية :) . هذه هي المعلمة التي تسمح لك بالضبط أنماط مختلفةلخلفية الصفحة. يمكنك القيام بعملية ضبط اللون بطريقتين. أولاً:

النص الأساسي (الخلفية:#000000) - يجب أن تكون خلفية الصفحة الآن سوداء.

هذه الطريقة مناسبة أيضًا لتعيين اللون وصورة الخلفية. بعد النقطتين يمكنك وضع رمز اللون أو رابط للصورة. أو يمكنك استخدام طريقة تعني فقط تعيين لون - تعبئة محددة للصفحة. بعد النقطتين تحتاج إلى كتابة ما يسمى المعلمة – اللون. وبعده ضع كود اللون نفسه . هذه الطريقة جيدة إذا كنت تستخدمها كقالب. اكتبه واحفظه، وعند الضرورة، حدد لونًا وضعه على الصفحة.

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

الآن ستكون الصورة التي اخترتها هي خلفية صفحة الموقع بأكملها. نأمل أن تفهم كيفية إنشاء خلفية بتنسيق html. فقط حاول وكل شيء سينجح بالتأكيد!

27/12/14 55.8 ألف

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

خلفية للموقع

يحدث ذلك التصميم القديملقد تعبت بالفعل من الموقع. وأريد شيئا جديدا ولذيذا. أ تصميم جديدسيكون الأمر كذلك إذا قمت بطهيه بيديك.

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

هناك عدة طرق لتغيير الخلفية على موقع الويب. لهذا الغرض يتم استخدامها مميزات CSSأو أتش تي أم أل. لكن العديد من خصائص العمل مع الخلفية لها نفس الاسم وطريقة التطبيق في تقنيات الويب هذه.

أساسيات العمل مع الخلفيات في HTML

يمكن استخدام عدة عناصر كخلفية:

• لون؛
• الصورة الخلفية؛
• صورة الملمس.

دعونا نلقي نظرة على استخدام كل واحد منهم بمزيد من التفصيل.

لتعيين اللون خلفيةبالنسبة للموقع، يتم استخدام خاصية لون الخلفية لسمة النمط. أي أنه لتعيين اللون الرئيسي لصفحة الويب، يتعين عليك كتابته داخل العلامة . على سبيل المثال:

خلفية الموقع #55D52B

يستثني رمز سداسي عشريالألوان هي قيمة معتمدة في تنسيق الكلمة الرئيسية أو RGB. أمثلة:

خلفية موقع الويب rgb(23,113,44)

خلفية الموقع باللون الأخضر

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

يدعم HTML 16 كلمة رئيسية فقط لتعيين الألوان. وهنا عدد قليل منهم: الأبيض والأحمر والأزرق والأسود والأصفرو اخرين.

لذلك، لتعيين الخلفية لموقع ويب بتنسيق html، فمن الأفضل استخدام التنسيق السداسي العشري أو تنسيق RGB.

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

الآن دعونا نلقي نظرة على إمكانيات لغة النص التشعبي لتعيين صورة خلفية للموقع. ويمكن القيام بذلك باستخدام خاصية صورة الخلفية.

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

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

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

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

• كرر-x - كرر صورة الخلفية أفقيًا؛
• كرر ص - عموديا؛
• كرر – على كلا المحورين؛
• عدم التكرار - التكرار محظور.

من بين الخيارات المدرجة، نحن مهتمون بالخيار الأخير. قبل تغيير خلفية الموقع نستخدمها في الكود الخاص بنا:

ولكن، بالطبع، سيكون من الأفضل أن يكون المنشور الخاص بنا موجودًا في منتصف الشاشة. إن خاصية موقف الخلفية مخصصة تحديدًا لوضع صورة الخلفية على الصفحة. يمكنك ضبط إحداثيات الموقع بعدة طرق:

• الكلمة الرئيسية ( أعلى، أسفل، وسط، يسار، يمين);
• النسبة المئوية - يبدأ العد من الزاوية اليسرى العليا؛
• بوحدات القياس (بكسل).

دعونا نستفيد أكثر خيار بسيطتوسيط:

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

• التمرير؛


• مُثَبَّت.

نحن بحاجة إلى القيمة الأخيرة. الآن سيبدو رمز المثال الخاص بنا كما يلي:

خلفية نسيج الموقع

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

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

في هذه التدوينة سأخبرك كالعادة تعيين الخلفية للموقعاستخدام لغة البرمجةشفرة.

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

إذا كنت لا تعرف ما هو لغة البرمجة، فيمكن أن يطلق عليها بشكل عام لغة المواقع أو مجموعة القواعد التي يتم من خلالها إنشاء المواقع.

على سبيل المثال، ترى صورة على موقع ويب، ولكن في كود HTML الخاص بالصفحة قد تبدو كما يلي:

قم بتعيين لون خالص لخلفية الصفحة.

من أجل التثبيت الخلفية في النموذج اللون الصامد ، حاجة في العلامة اضف ميزة com.bgcolor.

< html >
< head >
< title >عنوان الصفحة.

< body bgcolor = "#ffcc00" >

أنت تستطيع هذا الرمزادخل في ملف نصيوحفظه بالملحق .html. ثم افتحه بأي متصفح وشاهد النتيجة.

كما خمنت على الأرجح، يظهر لون الخلفية بسبب رمز اللون الموجود في السمة بجكولور = "القيمة"، والتي يمكن العثور عليها باتباع هذا الرابط.

تعيين صورة على خلفية صفحة HTML.

بغرض ضبط الصورة على الخلفية، يمكنك استخدام السمة خلفيةفي العلامة .

< html >
< head >
< title >عنوان الصفحة.

< body background = "http://сайт/images/mlmsecret.jpg" >مرحبًا. هذه هي صفحتي الأولى.

قد تلاحظ أن السمة خلفيةيساوي مسار الملف الذي يستخدم كخلفية.

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

لمعرفة المسار السابق في الصفحة التي بها الصورة اضغط على الصورة انقر على اليمينوانقر على "نسخ عنوان URL للصورة". بهذه الطريقة سترى اسم الصورة/الخلفية. وبعد ذلك يمكنك ببساطة استبدال الصورة القديمة بصورتك الخاصة، باستخدام نفس اسم الملف.

كانت هذه أبسط أساسيات الإعداد الخلفية في أتش تي أم ألوالآن يأتي الجزء المثير للاهتمام. 🙂

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

كيفية تمديد الخلفية إلى العرض الكامل للنافذة؟

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

كيفية إضافة صورة خلفية لصفحة ويب؟

لإضافة صورة خلفية إلى صفحة ويب، قم بتعيين المسار إلى الصورة ضمن قيمة عنوان url لخاصية نمط الخلفية، والتي تتم إضافتها بدورها إلى محدد النص.

هل من الممكن عمل خلفية متحركة؟

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

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

كيفية وضع صورة خلفية في الركن الأيمن السفلي من الصفحة؟

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

كيف يمكنني منع الخلفية من التكرار؟

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

كيف يمكنني جعل الخلفية تتكرر عموديًا فقط؟

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

لون الخلفية يكفي عنصر مهمأي صفحة ويب. أولاً، فهو يحدد المزاج المطلوب والمزاج العام للموقع، وثانياً، يسهل إدراك النص.

يتم تعيين لون خلفية صفحة الويب باستخدام السمة bgcolor للعلامة .

مثال 1: تغيير لون الخلفية

يمكن تحديد اللون كقيمة سداسية عشرية أو باسمه.

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

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

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

مثال 2: إضافة خلفية

إذا كانت الصورة مقاس اصغرشاشة العرض، سيتم إعادة إنتاجها أفقيًا وعموديًا.

نظرًا لأن صورة الخلفية يتم تحميلها بشكل أبطأ من لون الخلفية، فقد ينتهي بك الأمر بنص غير قابل للقراءة لفترة من الوقت حتى يتم تحميل الصور. يمكن أن يحدث نفس الشيء إذا تم تعطيل الصور في المتصفح. لذلك، يوصى دائمًا بتعيين لون الخلفية مع صورة الخلفية (المثال 3).

مثال 3: استخدام صورة الخلفية ولون الخلفية

خلفية ثابتة

افتراضيًا، عند استخدام شريط التمرير، تتحرك صورة الخلفية مع محتوى صفحة الويب. متصفح الانترنتيسمح لك بجعل الخلفية ثابتة باستخدام سمة العلامة bgproperties ="fixed " .

مثال 4: تعيين خلفية ثابتة

من خلال تحديد سمة bgproperties، كما هو موضح في المثال 4، ستظل صورة الخلفية على صفحة الويب ثابتة، لكن النص والرسومات والعناصر الأخرى ستتحرك مع شريط التمرير.