CSS Background Tutorials in Hindi – Part 4

आज इस आर्टिकल में हम आपको CSS Background Tutorials in Hindi – Part 4 के बारे में बताएँगे.

CSS background property का इस्तेमाल करके हम किसी भी HTML element में background इफ़ेक्ट डाल सकते है. इसकी कुछ main property है जो बहुत ज्यादा इस्तेमाल होती है और हम इनका इस्तेमाल आपको इस आर्टिकल में करके दिखाएंगे.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

background-color property का इस्तेमाल किसी भी element के background के color को बदलने के लिए किया जाता है. By Default background color सफेद रहता है लेकिन हम अपने हिसाब से किसी भी element के background color को चेंज कर सकते है. color value के लिए हम Color Name, Color RGB और Hex कोड दे color को define करते है. color value के बारे में हमने पिछले आर्टिकल में आपको कुछ कोड और नाम भी बताये थे.

Example

h1 {
    background-color: green;
}
h2 {
    background-color: #a25d15;
}
p {
    background-color: rgb(152, 218, 65);
}

Output>>>>

Background Image

background-image का इस्तेमाल तब किया जाता है जब आपको किसी element के background में कोई image को सेट करना होता है. By Default background image automatic element के हिसाब से repeat होती रहती है जिसके बारे में हम आपको अगले सेक्शन में बताएँगे की कैसे आप background image की repeat को off कर सकते है. इसमें हमने url() का इस्तेमाल करना पड़ता है और इसके बाद में इसके ब्रैकेट में हम उस image का path देते है जो हमने element के background में सेट करनी होती है.

Example

body {
background-image: url(“filename.jpg”);
}

Background Repeat

जैसा की नाम से पता लग रहा है की यह background के बार बार दोहराने से सम्बन्ध रखता है. अगर हमें कोई image को एक Horizontally या Vertically दिखाना है तो हम क्या करे क्योकि By Default background image अपने आप repeat होती रहती है जब तक element का width और height complete ना हो जाए.

इसको दूर करने के लिए हम background-repeat property का इस्तेमाल करते है. इसकी value में हम 3 value देते है जिसकी मदद से हम किसी image के repeat इफ़ेक्ट को चेंज कर सकते है.

• repeat-x => x-axis पर repeat करने के लिए
• repeat-y => y-axis पर repeat करने के लिए
• no-repeat => सिर्फ एक बार show करने के लिए

Example

x-axis पर Repeat करने के लिए

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

y-axis पर Repeat करने के लिए

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

सिर्फ एक बार show करने के लिए

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

Background Position

इसका इस्तेमाल background image की posititon को सेट करने के लिए किया जाता है.background-position का इस्तेमाल करके हम किसी भी image की पोजीशन को किसी भी element के एरिया में सेट कर सकते है. इसके लिए हम left, right, top और bottom value का इस्तेमाल करते है.

Example

body {
background-image: url("filename.png");
background-repeat: no-repeat;
background-position: right top;
}

Background Fixed Position

ऊपर तो हमने आपको किसी भी पोजीशन को सेट करने के बारे में बताया था. अगर हमने कोई background की पोजीशन को फिक्स करना हो ताकि जब भी हम किसी content को स्क्रॉल करे तो हमारा background की पोजीशन move ना हो तो इसके लिए हम background-attachment का इस्तेमाल करके इसमें fixed value पास करके किसी भी background image को फिक्स कर सकते है.

Example

body {
  background-image: url("filename.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

CSS Border Tutorial in Hindi – Part 5>>>>>>>>>>

इसे भी पढ़े – Antivirus क्या होता है और PC मे कौन सा Antivirus डालना चाहिए?