CSS में background property का उपयोग HTML के किसी भी elements का background देने के लिए किया जाता है।
CSS Background property in Hindi
अगर आप background देना चाहते है तो कुछ CSS property इस प्रकार है :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
CSS Background-color in Hindi
CSS में background color add करने के लिए आप RGB , HEX , HSL , RGBA, HSLA में से कोई भी technique को use कर सकते है। या फिर इसके जगह में आप direct color के नाम को भी लिख सकते है।
body{
background-color: blue;
}CSS Background Image in Hindi
अगर आप background में color के जगह पर किसी image को उसे करना चाहते है तो आपको url() method use करना होगा , जिसमे आप image के path को pass कर रहे होंगे।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Image Background in Hindi </title>
<style>
body{background-image : url("image.jpg")}
</style>
</head>
<body>
<h2> यह एक मात्र CSS Background Image Example है </h2>
</body>
</html>CSS background-repeat in Hindi
जब भी आप किसी image को एक background बनाते है तो आप notice कर रहे होंगे की वो image पुरे display में repeat हो रहा होगा इसी repeatation को control करने के लिए background-repeat property का use करते है।
1.अगर आप image को repeat नहीं करना चाहते तो आप इसको use करे :
background-repeat: no-repeat;
2.अगर आप image को only horizontal direction में repeat नहीं करना चाहते तो आप इसको use करे :
background-repeat: repeat-x;
3.अगर आप image को only vertical direction में repeat नहीं करना चाहते तो आप इसको use करे :background-repeat: repeat-y;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Image Background in Hindi </title>
<style>
body{background-image : url("image.jpg")
background-repeat : no-repeat;
}
</style>
</head>
<body>
<h2> यह एक मात्र CSS Background Image Example है </h2>
</body>
</html>CSS background-attachment in Hindi
As a background use किये गए image को scroll करने लायक बनाना है या नहीं ये चीज “background-attachment” property deside करता है।
1.जब background image fix होतो इसका use करते है :
background-attachment: fixed;
2.जब background image scroll-able हो तो इसका use करते है :
background-attachment: scroll;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Image Background in Hindi </title>
<style>
body{background-image : url("image.jpg")
background-repeat : no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h2> यह एक मात्र CSS Background Image Example है </h2>
</body>
</html>CSS background-position in Hindi
As a background use किये गए image के possition को सेट करने के लिए “background-position” property का उसे करते है।
background-postion : center;
center के जगह पर आप और अन्य value का use कर सकते है :
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Image Background in Hindi </title>
<style>
body{background-image : url("image.jpg")
background-postion : center;
}
</style>
</head>
<body>
<h2> यह एक मात्र CSS Background Image Example है </h2>
</body>
</html>