CSS Background Image in Hindi – बैकग्राउंड इमेज कैसे जोड़ें

HTML document में किसी भी images को background में कैसे सेट करें हिंदी में जानिए। जानिए इस tutorial में “CSS Background Image कैसे सेट करें“?

आपको पता ही होगा कि डिफ़ॉल्ट रूप से HTML पेज पर कोई इमेज नहीं होती है, यह सिर्फ सफेद रंग की होती है।

CSS Background Image in Hindi

अगर आप background में कोई color या इमेज सेट करना चाहते हैं, तो इसके लिए आपको CSS का इस्तेमाल करना होगा।

CSS color background में कैसे सेट करें यह पिछले ट्यूटोरियल में सिखाया गया है।

आज हम इस ट्यूटोरियल में इमेज को Background में सेट करना सीखेंगे।

तो चलिए इस Background-image property के बारे में समझते है;

CSS में background-image property का इस्तेमाल इमेज को किसी HTML element की बैकग्राउंड के रूप में सेट करने के लिए किया जाता है.

इस CSS property का उपयोग करके, हम एक तत्व के लिए एक या एक से अधिक background image सेट कर सकते हैं।

Syntax:

background-image: url();

चलिए इसको उदाहरण के साथ समझते है की CSS में बैकग्राउंड इमेज कैसे जोड़ें:

How to add background image in CSS in Hindi

How to add background image in css in hindi

Background पर image का उपयोग करना बहुत आसान है।

url () value आपको किसी भी image को file path प्रदान करने की अनुमति देता है,

और यह उस elements के लिए background के रूप में दिखाई देगा।

इसके लिए आपको सबसे पहले यह सुनिश्चित करना है कि आप अपनी परियोजना (Project) में उपयोग की जाने वाली images को रखने के लिए एक संपत्ति निर्देशिका (फ़ोल्डर) बनाते हैं।

उदाहरण के लिए हम जिस प्रोजेक्ट पर काम कर रहे हैं उसमें एक इमेज फोल्डर (image folder) बनाया है.

और एक इमेज जोड़ हैं जो “background.png” नाम रखा है.

जिसे हम HTML document के specific part के background में उपयोग करना चाहते हैं।

अपनी .css फ़ाइल के section tag में background-image जोड़ने के लिए, निम्नलिखित कोड लिखें:

section {
     background-image: url("images/background.png");
        }

आइए कोड पर विस्तार से चर्चा करते है:

  • section यह टैग को निर्दिष्ट करता है जिसमें आप image जोड़ना चाहते हैं।
  • url () इसका उपयोग CSS को यह बताने के लिए किया जाता है कि हमारी image कहाँ स्थित (locate) है।
  • "images/background.png" यह image का path है।
  • अंत में semicolon ; मत भूलना!

नोट: URL के बारे में पूरी जानकारी के लिए ये पढ़े “URL meaning in Hindi“।

Example: Add background image in body:

<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-image: url("image/bg.png");
}
</style>

</head>

<body>
<h1>Tutorial in Hindi!</h1>
<p>This page has an image as the background!</p>

</body>
</html>

Output:

HTML body background image in css

ध्यान दें: url(“image/bg.png“) यह मेरा image locate है, आप अपने हिसाब से रखें। जिसमें image एक folder और bg.png image का नाम है।

Add background image in the paragraph:

Paragraph में background image add करना भी बहुत आसान है:

<!DOCTYPE html>
<html>
<head>

<style>
p {
  background-image: url("image/bg.png");
}
</style>

</head>

<body>
<h1>Tutorial in Hindi!</h1>
<p>This page has an image as the background!</p>

</body>
</html>

Output:

Paragraph background image css property in hindi

इसी तरह आप heading में भी add कर सकते है।

अब आप किसी भी HTML code editor में ऊपर दिए गए कोड को practice करे,

और HTML में CSS का उपयोग करके background image का इस्तेमाल करना सीखते रहें.

Learn Complete CSS in Hindi

आगर आपको CSS की पूरी course हिंदी में सिखा है तो नीचे CSS tutorial पर जाएँ।

निष्कर्ष

मुझे उम्मीद है कि यह ट्यूटोरियल “How to add background image in CSS in Hindi (CSS में बैकग्राउंड इमेज कैसे जोड़ें)” आपको पूरी बात समझने में मदद करेगा।

इस लेख ‘CSS Background-Image property in Hindi‘ में आपने सीखने को मिला। अगर आपका कोई सवाल है तो नीचे पूछ सकते है।

पिछला लेखSyntax of CSS in Hindi – CSS का सिंटैक्स और उपयोग
अगला लेखFeatures of Python in Hindi (पाइथन की विशेषताएं)
वह एक पेशेवर वेब और ऐप डेवलपर और भारतीय ब्लॉगर हैं। वह लोगों की मदद करना और उनका मार्गदर्शन करना पसंद करते हैं। इसलिए वह इस ब्लॉग "ट्यूटोरियल इन हिंदी" में अपना ज्ञान हिंदी भाषा में साझा करते हैं। अगर आपको यह पोस्ट मददगार लगे तो इसे शेयर जरूर करें।

कोई जवाब दें

कृपया अपनी टिप्पणी दर्ज करें!
कृपया अपना नाम यहाँ दर्ज करें

five × one =