CSS Background Properties In Hindi | CSS Background Properties Kya Hoti Hai?

By
admin
-
0
374
css background properties
CSS background-position Property In Hindi

CSS Background Properties In Hindi : इस Tutorial में हम आपको CSS Background Properties के बारे में बताएंगे। हम जानेंगे कि CSS Background Property क्या होती हैं? CSS Background को कैसे apply और Set किया जाता हैं ?

तो चलिए जानते है CSS Background Properties In Hindi .एक एक करके सारी Background Properties के बारे में जानेंगे।

CSS Background Properties Kya Hoti Hai?

CSS background properties बहुत ही Useful Property है जिसका Use करके हम अपने Webpage को Attractive बना सकते है ,और किसी भी HTML element या Selector को जैसे Class, ID को Color या Image लगा कर अच्छे से Present और Effective बना सकते हैं।

css background properties
CSS Background Properties

CSS Background Property Webpages में Background Image को Set करने के लिए Use की जाती है। हम किसी भी Particular Element के लिए भी Background को Apply कर सकते है। वैसे तो Background को Body Element में Define किया जाता है। जो की पूरे वेबपेज पर काम करता है।

CSS Background Properties In Hindi

  • background-image
  • background-size
  • background-position
  • background-attachment
  • background-repeat
  • background-color
  • background-origin
  • background-clip
  • CSS background – Shorthand property

CSS background-image Property In Hindi

किसी Element के पीछे अगर हमे कोई Image को बैकग्राउंड की Use करना है तो इसके लिए हम Background-image Property का Use करते है। Background-image Property एक Eement के Background के लिए एक Image Specifies करता है। By default, Image Repeat होती है, जिससे पूरे Element को Cover कर लेता है।

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("backgroud.jpg");
}
 </style>
</head>
<body>
 <h1>Bloom Tutorial</h1>
 <p>CSS Background Properties In Hindi!</p>
</body>
</html>
css background image property

Background Image को Specific Elements के लिए भी सेट किया जा सकता है, जैसे <p> , <h1>, <span>
Element:

इन्हे भी पढ़ें-

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url("backgroud.jpg");
}
 </style>
</head>
<body>
 <h1>Bloom Tutorial</h1>
 <p>CSS Background Properties In Hindi!</p>
</body>
</html>
element background property

CSS background-size Property In Hindi

background-size property Background Images के Size को Specify करती है।

<!DOCTYPE html>
<html>
<head>
<style>
.try{
background-image: url("bg.jpg");
}
 </style>
</head>
<body>
<h2>background-size: auto (default):</h2>
<div class="try">
 <h1>Bloom Tutorial</h1>
 <p>CSS Background Properties In Hindi!</p>
</div>
</body>
</html>
css background size property
<!DOCTYPE html>
<html>
<head>
<style>
.try{
   padding: 25px;
   background: url(bg.jpg);
   background-repeat: no-repeat;
   background-size: 300px 100px;
}
 </style>
</head>
<body>
<h2>background-size: 400px 150px:</h2>
<div class="try">
 <h1>Bloom Tutorial</h1>
 <p>CSS Background Properties In Hindi!</p>
</div>
</body>
</html>
background size property

इस Property के साथ आप चार अलग-अलग Syntaxes का भी Use कर सकते हैं: keyword Syntax (“auto”, “cover” और “contain”), one-value syntax ( image की width को set करता है (height “auto”), two-value syntax (first value: image की width , second value: height), और कई Background Syntax (comma से अलग)।

CSS Syntax

background-size: auto | length | cover | contain | initial | inherit;

Values of Property

ValueDescription
autoये Default Value होती है , जिससे की Background Image अपने Original Size में display होती है।
coverये Background Image को Resize कर देता है, जिससे की Container पूरा Cover हो जाये, चाहे उसे Image को Stretch करना हो या Corner से काट देना हो।
containMake Sure करने के लिए कि Image पूरी तरह से दिखाई दे रही है, Background Image को Resize कर दिया गया है

Example of Background Image with “Cover”

<!DOCTYPE html>
<html>
<head>
<style>
.try{
   padding: 25px;
   background: url(cover.jpg);
   background-repeat: no-repeat;
   background-size: cover;
}
 </style>
</head>
<body>

<div class="try">
 <h1>Bloom Tutorial</h1>
 <p>Background Size Property -Cover</p>
</div>
</body>
</html>
css cover property

Example of Background Image with “Contain“

 <!DOCTYPE html> 
<html> 
<head> 
<style> 
.try{    
padding: 25px;    
background: url(cover.jpg);   
 background-repeat: no-repeat;    
background-size: contain; }  
</style>
 </head>
 <body> 
<div class="try"> 
 <h1>Bloom Tutorial</h1>
  <p>Background Size Property -Contain</p> 
</div> 
</body>
 </html>
contain css property

CSS background-position Property In Hindi

background-position property का use background image की Position को Set करने के लिए किया जाता है। By default, एक background-image अपने आप किसी भी element के top-left corner placed होती है , and repeat होती है vertically and horizontally. 

 <!DOCTYPE html> 
<html> 
<head> 
<style> 
body{    
   background-image: url('bg.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center; 
</style>
 </head>
 <body> 

 <h1>CSS Background Properties</h1>
  <p>The Background Position Property </p> 
</body>
 </html>
background position property

background-position को set करने के लिए और भी properties है जैसे : center top; , bottom right;

CSS background-attachment Property In Hindi

background-attachment property specifies करती है कि background image को scroll करना चाहिए या fixed होना चाहिए।

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

background-image : fixed ये Specify करता है की background image को page के साथ scroll करना चाहिए:

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

CSS background-repeat Property In Hindi

background-repeat property Sets करती है की कैसे Background Image Repeat होगी। By default, एक background-image vertically and horizontally repeat होती है।

body {
  background-image: url("bg.gif");
  background-repeat: repeat-x;
}

Property Values

ValueDescription
repeatbackground image By Default Repeat होती है Vertically and Horizontally
repeat-xbackground image सिर्फ horizontally repeat होगी।
repeat-ybackground image सिर्फ vertically repeat होगी।
no-repeatbackground image repeat नहीं होगी, सिर्फ एक बार ही Show होगी।

CSS background-origin Property In Hindi

background-origin property specifies करती है background image का Area (the background positioning area).

 <!DOCTYPE html> 
<html> 
<head> 
<style> 
.try{    border: 10px dashed black;
  padding: 25px;
  background: url(bg.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;
</style>
 </head>
 <body> 
<div class="try">
 <h1>CSS Background Properties</h1>
  <p>The Background Origin Property</p> 
</div>
</body>
 </html>

Property Values

ValueDescription
padding-boxये Default value होती है , इसमें background image upper left corner से start होती है।
border-boxइसमें background image border के upper left corner से start होती है।
content-boxइसमें background image content के upper left corner से start होती है।

CSS background-clip Property In Hindi

background-clip property ये define करती है की background (color or image) element से कितना दूर होना या कितना extend चाहिए।

 <!DOCTYPE html> 
<html> 
<head> 
<style> 
.try{    border: 10px dotted black;
   padding: 15px;
   background: lightblue;
   background-clip: content-box;
</style>
 </head>
 <body> 
<div class="try">
 <h1>CSS Background Properties</h1>
  <p>The Background Clip Property</p> 
</div>
</body>
 </html>

CSS background – Shorthand property

Code को short करने के लिए, एक ही property में सभी background properties को specify करना भी possible है। इसे shorthand property कहा जाता है।

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Conclusion

इस लेख के जरिये आपने जाना कि CSS Background Properties क्या है ? कौन कौन सी होती है , इनको कैसे use किया जाता है। हमने आपको with example देके समझाने की कोशिश की है | उम्मीद है यह लेख आपके लिए helpful रहा होगा । अगर आपको मन में CSS Background Properties से Related किसी भी तरह के कोई भी question है तो आप हमें नीचे comment कर पूछ सकते है।

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here