इस लेख मे हम CSS Background property के बारे मे detail मे जानकारी देंगे। हम जानेंगे की background property क्या है? और इसे कैसे set किया जाता है?
CSS background properties का परिचय
अगर आप अपने website को सुंदर और आकर्षित बनाना चाहते है तो आपको CSS Background property के बारे मे पता होना चाहिये। background property का इस्तेमाल करके आप background मे image या color को set कर सकते हो।
Background को control करने के लिये CSS मे कई सारी property है जिसको हम requirements के अनुसार इस्तेमाल करके web page को attractive बना सकते है।इस लेख मे हम कुछ important property के बारे मे detail मे जानेंगे।
CSS background-color
अगर आप HTML document या Elements मे color background set करना चाहते हो तो background-color property का इस्तेमाल किया जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: gray;
}
h1 {
color: orange;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>CSS background properties</p>
</body>
</html>
यहा CSS मे color को specify करने के तीन तरीके है।
- color name जैसे की “red”
- HEX code जैसे की “#FF0000”
- RGB valueजैसे की “rgb(255,0,0)”
How to add background image in CSS
अगर आप किसी भी element के पीछे image को as a background set करना चाहते हो तो background image property का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://compressjpeg.com/images/compressjpeg/icon.png");
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>CSS background properties</p>
</body>
</html>
यहा Background-image property की value मे हमे URL यानि की image की location बतानी पड़ती है। जिसके लिए url() का इस्तेमाल करना पड़ता है।
Background Image को Repeat करना
अगर आपकी background image की size छोटी है और आपको पूरा background cover करना है तो आप background-repeat property का इस्तेमाल कर सकते है।
इस property से आप image को horizontally, vertically या दोनों side repeat कर सकते है।
background-repeat property की चार value है जो इस प्रकार है।
- repeat – इससे आप image को horizontally और vertically दोनों side image को repeat कर सकते है।
- no-repeat – इससे आप image को repeat नहीं कर सकते है।
- repeat-x – इससे आप image को horizontally repeat कर सकते है।
- repeat-y – इससे आप image को vertically repeat कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://compressjpeg.com/images/compressjpeg/icon.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>CSS background properties</p>
</body>
</html>
यहा image vertically repeat हो रहा है।
Background Position Set करना
अगर आप background की position set करना चाहते हो तो आप background-position property का इस्तेमाल करके कर सकते है। by default background की position left-top होती है।
अगर आप इसें manually set करते हो तो इसमे पहली value left side से दूरी बताती है और दूसरी value right side से दूरी बताती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://compressjpeg.com/images/compressjpeg/icon.png");
background-repeat: no-repeat;
background-position: 100px 100px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>CSS background properties</p>
</body>
</html>
CSS background-attachment
background-attachment property से आप image को scroll करा सकते है या fixed कर सकते है।
जब इस property की value scroll होती है तब page ऊपर या नीचे होता है तो background image भी ऊपर नीचे scroll होगी। और fixed value मे background image एक ही जगह पर रहती है।
यह उदाहरण try करे
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://compressjpeg.com/images/compressjpeg/icon.png");
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>CSS background properties</p>
</body>
</html>
CSS background – Shorthand property
आप सभी background property को एक ही line मे define कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("https://compressjpeg.com/images/compressjpeg/icon.png") no-repeat right top;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>CSS background properties</p>
</body>
</html>
यहा background property को इस order मे लिखे।
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
अगर इसमे से कोई भी property का इस्तेमाल नहीं करना चाहते है तो इसके बाद की property से continue करे।
Next : CSS Border Property in Hindi