कैसे HTML में बैकग्राउंड इमेज सेट करें (Set a Background Image in HTML)

सहयोगी लेखक द्वारा विकीहाउ स्टाफ

यदि आप किसी वेबपेज (Webpage) पर इमेज (Image) एड करना चाहते हैं, तो ऐसा करने के लिए आपको HTML और CSS की जरूरत पड़ेगी। हाइपरटेक्स्ट मार्कअप लैंग्वेज (Hypertext Markup Language), HTML का पूरा नाम होता है और ये एक तरह का कोड होता है, जो ब्राउज़र को बताता है, कि वेबपेज को किस तरह से प्रदर्शित करना है। ^{[१]
X
रिसर्च सोर्स} कैस्केडिंग स्टाइल शीट्स (Cascading Style Sheets), CSS का पूरा नाम होता है और इसका इस्तेमाल किसी वेबपेज के प्रदर्शन और लेआउट (appearance and layout) को बदलने के लिए किया जाता है। ^{[२]
X
रिसर्च सोर्स} अब बस आपको उस बैकग्राउंड इमेज की जरूरत होगी, जिसे आप आपके वेबपेज पर इस्तेमाल करना चाहते हैं।

विधि 1

विधि 1 का 5:

आपकी फाइल्स तैयार करना (Setting Up Your Files)

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/2627945-1-1.jpg\/v4-460px-2627945-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/2627945-1-1.jpg\/v4-728px-2627945-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
आपकी HTML फाइल और बैकग्राउंड इमेज को रखने के लिए एक फोल्डर तैयार कर लें: आपके कंप्यूटर पर एक फोल्डर तैयार करें और उसको एक ऐसा नाम दें, जिसे आप बाद में आसानी से पा सकें।
- आप अपनी इच्छानुसार जो भी चाहें इस फोल्डर का नाम रख सकते हैं, लेकिन जब आप HTML पर काम करना शुरू करें, तो जहाँ तक हो सके आपकी फाइल्स को एक छोटा और कुछ एक या दो शब्दों का नाम देने की आदत डाल लें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-460px-2627945-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-728px-2627945-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
बैकग्राउंड इमेज को HTML फोल्डर में रखें: आप जिस भी इमेज को बैकग्राउंड की तरह इस्तेमाल करना चाहते हैं, उसे HTML फोल्डर में रख दें।
- यदि आपको इस बात से कोई फर्क नहीं पड़ता, कि आपकी वेबसाइट पुरानी डिवाइस पर और कम गति के इंटरनेट कनेक्शन के साथ सही ढ़ंग से चलेगी या नहीं, तो फिर आप किसी हायर रेसोल्यूशन (higher resolution) इमेज को बैकग्राउंड के रूप में इस्तेमाल कर सकते हैं। वैसे तो बैकग्राउंड तैयार करते समय एक साधारण इमेज, हल्की सी लाईट के साथ भी एक अच्छा चुनाव हो सकता है, ताकि आप इनके ऊपर लिखे हुए किसी भी टेक्स्ट को आसानी से पढ़ सकें।
- यदि आपके पास कोई भी इमेज नहीं है, तो फिर आप एक फ्री बैकग्राउंड इमेज डाउनलोड कर सकते हैं। यदि आप इमेज डाउनलोड कर लेते हैं, तो उसे आपके द्वारा तैयार किये हुए HTML फोल्डर में रख दें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-460px-2627945-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-728px-2627945-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
एक HTML फाइल तैयार करें: एक टेक्स्ट एडिटर खोलें और फिर एक नयी फाइल तैयार करें। अब इस फाइल को index.html की तरह सेव कर लें।
- आप जो भी टेक्स्ट एडिटर इस्तेमाल करना चाहें, कर सकते हैं, फिर वो चाहे विंडोज (Windows), नोटपैड (Notepad) और मैक ओएस एक्स (Mac OS X), टेक्स्टएडिट (TextEdit) जैसे सिस्टम टेक्स्ट एडिटर ही क्यों ना हों।
- यदि आप किसी ऐसे टेक्स्ट एडिटर का इस्तेमाल करना चाहते हैं, जो HTML के साथ काम करने के लिए ही बने हैं, तो एटम (Atom) एडिटर को डाउनलोड करने के लिए यहाँ क्लिक करें , ये एक ऐसा एडिटर है, जो विंडोज (Windows), मैक ओस एक्स (Mac OS X) और लिनक्स (Linux) जैसे ऑपरेटिंग सिस्टम (operating systems) के ऊपर काम कर सकता है।
- यदि आप टेक्स्टएडिट (TextEdit) का इस्तेमाल कर रहे हैं, तो फिर HTML फाइल लिखना शुरू करने से पहले Format मेन्यू पर क्लिक करें और फिर Make Plain Text पर क्लिक करें। इस सेटिंग से इस बात की पुष्टि हो जाएगी कि आपकी HTML फाइल, सही ढ़ंग से वेब ब्राउज़र पर लोड (load) होगी।
- माइक्रोसॉफ्ट वर्ड (Microsoft Word) जैसे वर्ड प्रोसेसर (Word processors) में कुछ ऐसी अंतर्निहित कैरेक्टर और फ़ॉर्मेटिंग मौजूद होती हैं, जो आपकी HTML फाइल को ब्रेक कर सकती हैं, जो फिर आगे जाकर वेब ब्राउज़र पर सही ढ़ंग से प्रदर्शित नहीं हो पाती, इसलिए इस तरह के वर्ड प्रोसेसर HTML फाइल तैयार करने के लिए उपयुक्त नहीं माने जाते।

विधि 2

विधि 2 का 5:

HTML फाइल लिखना (Writing the HTML File)

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-460px-2627945-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-728px-2627945-4-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
स्टैंडर्ड HTML कोड कॉपी और पेस्ट करें: नीचे मौजूद HTML कोड को सिलेक्ट करें और फिर कॉपी करें, इसके बाद इसे आपकी index.html फाइल में पेस्ट कर दें।
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Page Title </ 
 title 
 > 
 < 
 style 
 > 
 body 
 { 
 background-image 
 : 
 url 
 ( 
 " " 
 ); 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/2627945-5-1.jpg\/v4-460px-2627945-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/2627945-5-1.jpg\/v4-728px-2627945-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

index.html फाइल में, background-image: url(" "); लाइन ढूंढें। अब ब्रैकेट (parentheses) के बीच से कर्सर घुमाएँ और फिर बैकग्राउंड इमेज फाइल का नाम लिखें। बैकग्राउंड इमेज फाइल एक्सटेंशन (extension) शामिल करना ना भूलें।

आपके इसे लिखने के बाद, इसे कुछ ऐसा दिखना चाहिए:

background-image: url("background.png");

जब आप किसी फाइलनेम को बिना फाइल पाथ (path) या यूआरएल के इस्तेमाल करते हैं, तो फिर वेब ब्राउज़र, वेब पेज के ही फोल्डर में, आपके द्वारा दी हुई इमेज के नाम की खोज करने लगता है। यदि ये फाइल आपके फाइल सिस्टम में किसी और फोल्डर में है, तो फिर आपको उस फाइल का पूरा पाथ एड करना होगा।

^{[३]
X
रिसर्च सोर्स}

HTML फाइल को सेव कर लें।

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/2627945-6-1.jpg\/v4-460px-2627945-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/2627945-6-1.jpg\/v4-728px-2627945-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

विधि 3

विधि 3 का 5:

HTML फाइल की समीक्षा करना (Reviewing the HTML File)

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/72\/2627945-7-1.jpg\/v4-460px-2627945-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/72\/2627945-7-1.jpg\/v4-728px-2627945-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
index.html फाइल पर राईट-क्लिक करें और फिर इसे आपके पसंदीदा वेब ब्राउज़र पर खोल लें।
- अब जैसे ही ब्राउज़र खुलता है, और यदि आपको इमेज नजर नहीं आती है, तो फिर एक बार index.html टेक्स्ट एडिटर विंडो पर जाकर आपकी फाइल आपकी इमेज फाइल के नाम की स्पेलिंग (Spelling) सही होने की पुष्टि करें।
- ब्राउज़र खुलने के बाद में, यदि आपको बैकग्राउंड इमेज की जगह पर HTML कोड दिखाई देता है, तो इसका मतलब कि आपकी index.html फाइल एक रिच टेक्स्ट डॉक्यूमेंट (rich text document) की तरह सेव हुई है। अब आपको आपकी इस HTML फाइल को अन्य किसी टेक्स्ट एडिटर पर एडिट करना चाहिए।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f2\/2627945-8-1.jpg\/v4-460px-2627945-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f2\/2627945-8-1.jpg\/v4-728px-2627945-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

टेक्स्ट एडिटर विंडो में, कर्सर को <body> </body> टैग्स (tags) के बीच में घुमाएँ, और फिर Hello world! लिखें। अब इस टेक्स्ट को बैकग्राउंड इमेज में ऊपर देखने के लिए, ब्राउज़र विंडो को रीलोड (Reload) करें।

विधि 4

विधि 4 का 5:

HTML कोड को समझना (Understanding the HTML Code)

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6d\/2627945-9-1.jpg\/v4-460px-2627945-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6d\/2627945-9-1.jpg\/v4-728px-2627945-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

HTML कोड, खुले और बंद होते हुए टैग्स से बनता है। <body> टैग, खुला हुआ बॉडी टैग है और </body> टैग, बंद होता हुआ टैग। HTML पेज को सही ढ़ंग से प्रदर्शित हो पाने के लिए, पेज में मौजूद हर एक खुलने वाले टैग का बंद होना भी जरूरी है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/2627945-10-1.jpg\/v4-460px-2627945-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/2627945-10-1.jpg\/v4-728px-2627945-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

हर एक सही ढ़ंग से तैयार होने वाले HTML पेज की शुरुआत <!DOCTYPE html> के साथ होना चाहिए। ये वेब ब्राउज़र को बताता है, कि HTML फाइल एक HTML फाइल है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/2627945-11-1.jpg\/v4-460px-2627945-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/2627945-11-1.jpg\/v4-728px-2627945-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

टेक्स्ट एडिटर विंडो में, कर्सर को <body> </body> टैग्स (tags) के बीच में घुमाएँ, और फिर Hello world! लिखें। अब इस टेक्स्ट को बैकग्राउंड इमेज में ऊपर देखने के लिए, ब्राउज़र विंडो को रीलोड (Reload) करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/af\/2627945-12-1.jpg\/v4-460px-2627945-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/af\/2627945-12-1.jpg\/v4-728px-2627945-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

HTML कोड, खुले और बंद होते हुए टैग्स से बनता है। <body> टैग, खुला हुआ बॉडी टैग है और </body> टैग, बंद होता हुआ टैग। HTML पेज को सही ढ़ंग से प्रदर्शित हो पाने के लिए, पेज में मौजूद हर एक खुलने वाले टैग का बंद होना भी जरूरी है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/2627945-13-1.jpg\/v4-460px-2627945-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/2627945-13-1.jpg\/v4-728px-2627945-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

<title> टैग, ये वो टेक्स्ट होता है, जो आपकी ब्राउज़र विंडो के टाइटल बार में दिखता है, साथ ही ये टेक्स्ट ब्राउज़र टैब में भी दिखता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/2627945-14-1.jpg\/v4-460px-2627945-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/2627945-14-1.jpg\/v4-728px-2627945-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

<style> टैग में CSS कंटेंट होता है। <style> टैग्स के बीच में लिखा हुआ सारा कुछ एक CSS कोड होता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/2627945-15-1.jpg\/v4-460px-2627945-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/2627945-15-1.jpg\/v4-728px-2627945-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

<body> टैग के बीच में जो भी कुछ लिखा जाएगा और वो यदि HTML या CSS कोड नहीं है, तो वो सारा, सिर्फ HTML और CSS कोड के अलावा, जैसा लिखा है, वैसा ही नजर आएगा।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/2627945-16-1.jpg\/v4-460px-2627945-16-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/2627945-16-1.jpg\/v4-728px-2627945-16-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

टेक्स्ट एडिटर विंडो में, कर्सर को <body> </body> टैग्स (tags) के बीच में घुमाएँ, और फिर Hello world! लिखें। अब इस टेक्स्ट को बैकग्राउंड इमेज में ऊपर देखने के लिए, ब्राउज़र विंडो को रीलोड (Reload) करें।

विधि 5

विधि 5 का 5:

CSS कोड को समझना (Understanding the CSS Code)

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/2627945-17-1.jpg\/v4-460px-2627945-17-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/2627945-17-1.jpg\/v4-728px-2627945-17-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

आपकी index.html कोड में, CSS कोड <style> टैग्स के बीच में लिखा होता है, जो पेज के सामने आने पर, वेब ब्राउज़र को <body> टैग में बैकग्राउंड इमेज को एक खास नाम के साथ एड करने को कहता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/2627945-18-1.jpg\/v4-460px-2627945-18-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/2627945-18-1.jpg\/v4-728px-2627945-18-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-460px-2627945-19-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-728px-2627945-19-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
CSS स्टाइल्स, जो सिलेक्टर (selector) और डिक्लेरेशन (declaration) नाम के दो भागों से तैयार होती है। ^{[४]
X
रिसर्च सोर्स}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/2627945-20.jpg\/v4-460px-2627945-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/2627945-20.jpg\/v4-728px-2627945-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
CSS डिक्लेरेशन, प्रॉपर्टी (property) और वैल्यू (value) नाम के दो भागों से तैयार होता है। कर्ली ब्रेसेस के बीच में लिखा हुआ,
background-image , प्रॉपर्टी है और url("background.png") वैल्यू है। ^{[५]
X
रिसर्च सोर्स}

[१]

[२]

[३]

[४]

[५]

लॉग इन

कैसे HTML में बैकग्राउंड इमेज सेट करें (Set a Background Image in HTML)

चरण

आपकी फाइल्स तैयार करना (Setting Up Your Files)

HTML फाइल लिखना (Writing the HTML File)

HTML फाइल की समीक्षा करना (Reviewing the HTML File)

HTML कोड को समझना (Understanding the HTML Code)

CSS कोड को समझना (Understanding the CSS Code)

संबंधित लेखों

रेफरेन्स

विकीहाउ के बारे में

यह लेख ने कैसे आपकी मदद की?

सम्बंधित लेख

हमें फॉलो करें

शेयर करें

Explore Categories