तो इसलिए आज (What is Background Properties in CSS in Hindi) की इस आर्टिकल के अन्दर हम CSS के Background Properties के बारे में पूरी जानकारी आप लोगो के साथ शेयर करने वाले हे | और वो भी Practical Knowledge के साथ |
हमने पिछले आर्टिकल के अन्दर CSS के बारे में जाना था , और साथ में ये भी देखा था की एक Web Page में CSS को कैसे Implement करके अपने Web Page को Design किया जाता हे |
अगर आप लोगो ने वो आर्टिकल नही पड़ा , तो पहले उस आर्टिकल को एकबार जरुर पड़े , ताकि इस आर्टिकल के अन्दर दिए गये Concept को समझने में आसानी हो | तो आइये जानते हे Background Properties क्या होता हे , और कितने तरीको से Web Page की Background को Design किया जाता हे |
तो चलिए शुरू करते हे ,
What is Background Properties in CSS in Hindi पूरी जानकारी
जब हम किसी Web Page में उसका Background Define करते हे , जेइसे Background Color या Image set करना या फिर कुछ भी Design करते हे जो Background के अन्दर set किया जाता हे , तो उसके लिए हम इस Background Properties का इस्तेमाल करते हे |
मतलब , एक Web Page में उसका Background को कैसे Design किया जाता हे , ये सब कुछ इस Background Properties के मदत से ही होता हे | और इस Background Properties के मदत से आप चाहो तो किसी Particular Element में Apply करके सिर्फ उसका ही Background को set कर सकते हो |
तो ये ही होता हे Background Properties का Concept , अब बात करते हे कितने तरीकों से Background को Design किया जाता हे , आइये देखते हे ,,
Types of Background Properties : -
Background Properties के अन्दर ये कुछ Important Term होता हे , जिसका इस्तेमाल हम Web Page की Background को Design करने के लिए करते हे |जेइसे -
- Background-color
- Background-image
- Background -repeat
- Background -position
- Background -attachment
आइये इन सभी के बारे में बिस्तार से जानने की कौसिस करते हे , और साथ ही साथ Practical में Apply करके इस Concept को और भी अछे से समझते हे |
जेइसे -
1. Hex value - #ff7180
2. RGB value - rgb(250,90,70)
(RGB- Red , Green , Blue color का Combination)
Note:- किसी भी Color का Hex value या RGB value आपको गूगल में मिल जायेगा
तो इस तरह से हम HTML Element में Background Color को Set कर सकते हे |
Example :-
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-color: brown;
p{background-color: yellow;}
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :-
1. Background color :-
Background color Properties के मदत से HTML Element में उसका Color को set किया जाता हे , जिसमे आप चाहो तो उस Color का Name दे सकते हो , जेइसे - (Red, Green , Blue , Pink , Black....इत्यादि ) या फिर किसी भी color का value को भी Apply कर सकते हो ,जेइसे -
1. Hex value - #ff7180
2. RGB value - rgb(250,90,70)
(RGB- Red , Green , Blue color का Combination)
Note:- किसी भी Color का Hex value या RGB value आपको गूगल में मिल जायेगा
तो इस तरह से हम HTML Element में Background Color को Set कर सकते हे |
Example :-
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-color: brown;
p{background-color: yellow;}
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :-
.webp "What is Background Properties in CSS in Hindi")
तो इस तरह से Body में Background color को Add किया जाता हे , इनमे से आप किसी भि Term को अपने Style Sheet में Apply करके उसका Background color को change कर सकते हो |
2. Background image :-
HTML Element में जब Background Image को set किया जाता हे , तब हम इस CSS के इस Properties का इस्तेमाल करते हे | इस बजह से Web Page में पुरे body को उस Image से Cover किया जाता हे , चाहे वो Image Horizontal या Vertical क्यू ना हो | और जिस Image को हम HTML Element में Background के अन्दर set करते हे वो Image by Default ही रहता हे |इस Background Image Properties को set करने की बाबजूद हम किसी भी Text या फिर पुरे Body को Color से भी Design कर सकते हे , सिर्फ ये ही नही बल्कि इस Properties का इस्तेमाल करके हम किसी भी Image का URL add करके उस Image को अपने Web Page की Background में set कर सकते हे |
Example :
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-image: url(logo.png.png);
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :-
.webp "What is Background Properties in CSS in Hindi")
तो कुछ इस तरह से इस Background Image Properties का इस्तेमाल करके Web Page में Image को set कर सकते हो |
जिसमे Image का Name या फिर Image का Location को Add किया जाता हे , और आप चाहो तो गूगल से किसी Image का URL Add करके उसे Background में set कर सकते हो , या फिर आप Direct उसी Image का नाम Add करके भी Image को Background में set कर सकते हो |
3. Background repeat :-
जब हम किसी Image को अपने Web Page की Background के अन्दर Add करते हे , तो वो Image by Default Repeat ही रहता हे , चाहे वो Horizontal या Vertical में क्यू ना हो | तो इस Background Properties के मदत से हम उस Image के Repeat को Fixed कर सकते हे |और इस Properties को हम 3 तरीको से अपने Web Page में Apply कर सकते हे ,
जेइसे -
- Repeat-X :- Repeat X का मतलब हे की उस Image को हम Horizontal Direction में Repeat करना चाहते हे |
- Repeat -Y :- Repeat Y के मदत से Image को Vertically Direction में Repeat किय जाता हे |
- No- Repeat : - No Repeat का मतलब हे हम उस Image में कोई भी Repeat का इस्तेमाल करना नही चाहते हे |
Example : -
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-image: url(logo.png.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :
.webp "What is Background Properties in CSS in Hindi")
तो इस तरह से हम Background Repeat Properties का इस्तेमाल करके हम Image को Horizontal या Vertical Direction में Repeat और no repeat कर सकते हे |
4. Background position :-
इस Properties के मदत से हम Background Image को Proper तरीको से set कर सकते हे , जेइसे Image को left ,या फिर right में set करना , या फिर center में , मतलब - इस Properties का इस्तेमाल करके आप Image को किसी भी Position में set कर सकते हो |तो आइये जानते हे , वो कोन कोन Position value में Image को set किया जाता हे |
Position Value :-
left top , center top, right top , center left , center - center , right bottom, x% y% , x position , y position ,,,इत्यादि |
तो इस तरह से आप Image को किसी भी Position में Set कर सकते हो | हमने निचे एक example के मदत से आप लोगो को समझाने की कौसिस की हे |
Example : -
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-image: url(logo.png.png);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :
तो इस तरह से आप Image को किसी भी Position में Set कर सकते हो | हमने निचे एक example के मदत से आप लोगो को समझाने की कौसिस की हे |
Example : -
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-image: url(logo.png.png);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :
.webp "What is Background Properties in CSS in Hindi")
5. Background attachment :-
Background Attachment Properties का इस्तेमाल Image के Scrolling को Fixed करने के लिए किया जाता हे |लेकिन जब आप Web Page में किसी भी Image को set करते हो , तो उसका Attachment by Default Scrolling ही रहता हे |
तो इस लिए इस Properties का इस्तेमाल किया जाता हे |
Example :-
<html >
<head>
<title>Background Properties</title>
<style>
body{
background-image: url(logo.png.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output:-
.webp "What is Background Properties in CSS in Hindi")
Background Shorthand Property:-
अगर आप लोग Web Page में Background Properties के इन सभी को अलग अलग इस्तेमाल करने की बजह सब को एक साथ Use करना चाहते हो , तो उसके लिए इस Shorthand Properties का Define किया गया हे , जिसमे हम एक Line code में ही इन सभी को एक साथ इस्तेमाल करके Background को Design कर सकते हे | मतलब हम एक Single Properties का Use करके Multiple Background Properties को एक साथ इस्तेमाल कर सकते हे |जेइसे -
<html>
<head>
<title>Background Properties</title>
<style>
body{
background: yellowgreen url(logo.png.png) no-repeat right top fixed;
}
</style>
</head>
<body>
<h1>Hello, This is Heading </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :-
.webp)
Related Post :-
Conclusion :-
HTML Element में Background Properties का इस्तेमाल करके हम Web Page को Design कर सकते हे , Image set करना इत्यादि | मतलब एक Web Page को Design करने के लिए हम इस Background Properties का इस्तेमाल करते हे |
तो आज की (What is Background Properties in CSS in Hindi) इस आर्टिकल के अन्दर हमने CSS के Background Properties के बारे में पूरी जानकारी आप लोगो के साथ शेयर की हे , जेइसे Background Properties क्या हे , और किस तरह से हम इस Properties को अपने Web Page के अन्दर इस्तेमाल करके Web Page को अच्छा Look दे सकते हे |
तो उम्मीद करता हु आप लोगो को ये आर्टिकल पसंद आया होगा , अगर पसंद आया तो अपने दोस्तों के साथ शेयर जरुर करे , और अगर इस आर्टिकल के अन्दर दिए गये जानकारी से किसी भी तरह के कोई भी Doubt हे तो निचे Comment करके पुच सकते हो |
आर्टिकल को पूरा पड़ने के लिए आपका धन्यवाद |||
.webp)
.webp)
.webp)
.webp)
.webp)
