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

द्वारा

जून 25, 2024

CSS Background Image in Hindi: सीएसएस बैकग्राउंड इमेज आपको background-image property का उपयोग करके किसी तत्व (element) की background के रूप में एक छवि सेट करने की अनुमति देती है। उदाहरण: background-image: url(‘image.jpg’);।

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

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

Table of Contents

Toggle

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

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:

ध्यान दें: 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:

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

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

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

Learn Complete CSS in Hindi

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

CSS Tutorial

निष्कर्ष

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

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