If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS background properties का उसे किसी HTML Elements का background set करने के लिए किया जाता है। Background Color set करने के example तो आप पिछले topic में पढ़ ही चुके हैं। इस topic में background image set करने की बात करेंगे।
background set करने के लिए कुछ CSS properties इस प्रकार है -
CSS में colors के लिए RGB , HEX , HSL , RGBA, HSLA की कोई भी valid color value assign करके color change कर सकते हैं। या फिर आप direct colors के name भी दे सकते हैं।
body{
background-color: powderblue;
}background set करने के लिए url() method का use किया जाता है , जिसमे हेम image path pass करना होता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Image Background</title>
<style>
body{background-image : url("/assets/test.jpg")}
</style>
</head>
<body>
<h2>CSS Background Image Example</h2>
</body>
</html>हालाँकि यह जरूरी नहीं कि आप body का ही background set करें , आप चाहे तो किसी table , p , heading , div etc का भी image background set कर सकते हैं।
For Example:
1. set paragraph background
p {
background-image: url("imagename");
}
2. set h1
h1 {
background-image: url("paper.gif");
}
3. set div background
div {
background-image: url("paper.gif");
}अभी जब आपने ऊपर दिया गया example run किया होगा तो ये notice किया होगा कि body के background में set किया गया image repeat हो रहा होगा। उसी को control करने के लिए background-repeat का use किया जाता है। इसकी important values कुछ इस प्रकार है।
1. If don't want to repeat image : background-repeat: no-repeat; 2. repeat image only horizontal direction : background-repeat: repeat-x; 3. repeat image only vertical direction : background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Image Background</title>
<style>
body{
background-image : url("/assets/test.jpg");
background-repeat : no-repeat;
}
</style>
</head>
<body>
<h2>CSS Repeat Example</h2>
</body>
</html>background-positioan property की help से किसी background image की position set कर सकते हैं।
Set background image postion :
---------------------------------
background-postion : center;
Other values :
---------------------
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottombackground-attachment property का use करके आप specify कर सकते है कि , background image content के साथ scroll-able होगी या नहीं। इसकी 2 values होती हैं।
1. fix background image : background-attachment: fixed; 2. make background image scroll-able : background-attachment: scroll;
background shorthand property का use करके आप सभी background properties जैसे background-image, background-position, background-attachment को एक साथ define कर सकते हैं।
body{
background: color url(image_path) repeat position;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS background Example</title>
<style>
body{
background: hotpink url("/assets/test.jpg") no-repeat right top;
}
</style>
</head>
<body>
<h2>CSS background Example</h2>
</body>
</html>I Hope, अब आप background properties के बारे में अच्छे से समझ गए होंगे।