CSS Background Property in Hindi – Background-Image, Repeat, Size

by

css background property से किसी वेबपेज में background सेट की जा सकती है | जिससे वेबपेज और ज्यादा आकर्षित लगती है | background property एक property नहीं है, ये group of properties यानि कई properties का समारोह है | जिसे हम इस आर्टिकल में पढेंगे |

Table of Contents hide
1 CSS Background Property
1.1 background color property
1.2 css background image
1.3 background repeat
1.4 background position
1.5 background attachment
1.6 background size property
1.7 background-origin
1.8 background-clip
2 background property shorthand
3 multiple background images
4 multiple background properties कैसे सेट करें
5 अन्य CSS tutorial के सुझाव

CSS Background Property

css में background properties हैं

  1. background-color
  2. background-image
  3. background-repeat
  4. background-position
  5. background-size
  6. background-attachment
  7. background-origin
  8. background-clip

background color property

पुरे वेबपेज या फिर किसी खास element की background को color करने के लिए background-color property का इस्तेमाल होता है | color लगाने के लिए color name या फिर hexacode या RGB value का इस्तेमाल कर सकतें हैं | css3 में hsl, hsla और rgba से भी color दी जा सकती है | जिसे आप css color tutorial में पढ़ सकतें हैं |

background-color property का उदाहरण

<p style="background-color: rgba(0,0,255,0.6);"> This Is A Paragraph </p>

css background image

background-image property से किसी element या फिर पुरे वेबपेज की background में image लगा सकतें हैं | अगर पुरे वेबपेज में background-image लगानी है तो, body tag के लिए background-image property को सेट करनी पड़ेगी |

और अगर किसी element जैसे की <div>, <h1> या फिर <p> tag में background image लगानी है तो, उस element के लिए background-image property सेट करनी पड़ेगी |

background image देने के लिए image की पूरी पाथ को url attribute के अंदर लिखी जाती है | जैसे की url(‘d:\\images\\image1.jpg) |

उदाहरण:

<!doctype html>
<html>
<head>
<style>
  body{background-color:#99ff99;}
  div{
       width:300px;
       height:200px;
       margin:50px; 
       padding:50px;
       border:5px solid blue;
     }
  .div1{
	 background-image : url('D:\\CSSExample\\images\\whitefl.jpg'); 
       }
</style>
</head>
 <body>
  <div class="div1">
     <p> This Is A Paragraph </p>
  </div>
 </body>
</html>

output

css background-image property

आउटपुट में देखिये हमने div tag पे background image लगाया है और पुरे वेबसाइट की background color को green सेट की है |

background repeat

जब किसी वेबपेज पे background image लगातें हैं, वो अपनी साइज़ के हिसाब से सेट हो जाती है और बाकि के जगह को वो repeat हो कर cover कर लेती है | background-repeat property से image को repeat करना है या नहीं और अगर करना है तो horizontally रखना है या vertically वो सेट कर सकतें हैं |

css background-repeat property की values हैं

  1. repeat —— ये background-repeat की default value है, जिससे background-image repeat होकर दिखती है|
  2. no-repeat —— इस value से background-image repeat नहीं होती है | image बस एक ही बार दिखेगी |
  3. repeat-x —— इस value से background-image repeat तो होगी मगर horizontally यानि image बायीं से दायीं और repeat होगी |
  4. repeat-y —— इस value से background-image repeat होगी vertically यानि image ऊपर से लेकर निचे की और repeat होगी |
  5. space —— इस value से background image repeat होगी पर थोडा space लेकर repeat होगी |
  6. round —— इस value से background image repeat होगी पुरे पेज में पर अपनी original साइज़ से थोड़ी stretch होकर दिखेगी |

background position

background-position property से background image की position सेट की जाती है | इस properties की values हैं :

  1. left top
  2. left center
  3. left bottom
  4. right top
  5. right center
  6. right bottom
  7. center top
  8. center center
  9. center bottom

इन values से background-image की position कहाँ होगी ये आप निचे image में देख कर समझ पायेंगें |

background-position property values

background-position को % (x%y%) से भी सेट की जा सकती है या फिर pixel value (xpos ypos) से भी सेट की जा सकती है |

background attachment

जब हम किसी वेबपेज को देख रहे होतें या उसमे लिखी content को पढ़ रहे होतें हैं, और scroll करके जैसे जैसे निचे जातें हैं | तब content के साथ background image भी scroll होने लगती है | background-attachment property से background image को content के साथ scroll करवा सकतें या फिर fixed रख सकतें हैं|

background-attachment property की values हैं :

  1. scroll —- इस value से background-image, page के साथ scroll होती है | और ये background-attachment की default value होती है |
  2. fixed —- इस value से background-image fixed हो जाती है | और जब user, page को scroll करता है तो background image scroll नहीं होती है |
  3. local — इस value से background-image, content के साथ scroll होती है |

scroll और fixed property body tag में लगी background image के साथ इस्तेमाल होती है | और local property container tag में लगी background-image के साथ इस्तमाल होती है |

उदाहरण:

<style>
 body{
     background-image : url('D:\\CSSExample\\images\\flower.jpg');
     background-repeat: no-repeat;
     background-position: center;
     background-attachment: fixed;		
   }		 
</style>

background size property

background-size property से background image की चौडाई(width) और लम्बाई(height) को सेट कर सकतें हैं | और इस value को %(percentage) या pixel से दी जा सकती है |

css background-size को और 3 values से भी सेट की जा सकती है और वो values हैं :

  1. auto
  2. contain
  3. cover

background-origin

background origin property से हम background image को कहाँ से लगाना है वो बतातें हैं | जब हम किसी वेबपेज या किसी container के अंदर background-image लगातें हैं | तब वो image, padding area यानी padding box से सुरु होता है |

पर background-origin से image की सुरुआत को बदल सकतें हैं | इस property से background image को content के साथ सुरु कर सकतें हैं या फिर border के साथ सुरु कर सकतें हैं |

इसीलिए background-origin की 3 values हैं और वो हैं :

  • padding-box —- ये background-origin की default value है | इससे background image हमेसा padding area से सुरु होती है |
  • border-box —- इस value से background image border area से सुरु होती है |
  • content-box —- इस value से background image content के पास से सुरु होती है |

उदाहरण:

<!doctype html>
<html>
   <head>
      <style>
         body{ background-color:yellow;}
         div{
              width:200px;
              height:150px;
              margin:10px; 
              padding:10px;
              border:5px dotted blue;
              background-image : url('D:\\CSSExample\\images\\lili.jpg');
              background-repeat : no-repeat;	   
              display: inline-block;
              background-size : cover;
              color:white;
           }
         .div1{
               background-origin : padding-box;
         }
         .div2{
                background-origin : border-box;
         }
         .div3{
                background-origin : content-box;
         }
      </style>
   </head>
   <body>
      <div class="div1">
         <p> This Is A Paragraph to describe background properties with background origin from padding area</p>
      </div>
      <div class="div2">
         <p> This Is A Paragraph to describe background properties with background origin from border corner</p>
      </div>
      <div class="div3">
         <p> This Is A Paragraph to describe background properties with background origin from content area</p>
      </div>
   </body>
</html>

output

css background origin example

**नॉट : background-origin property सिर्फ background image की origin बताने के लिए इस्तेमाल होता है |

background-clip

background clip property का इस्तेमाल background image या फिर bckground color की origin को बताने के लिए किआ जाता है | इसकी default value है border-box |

background clip property, border origin property की तरह काम करती है | पर ये border image और border color दोनों के लिए काम करती है |

background-clip की values हैं :

  • padding-box —- इससे background image या background color को padding area से सुरु कराती है |
  • border-box —- इससे background image या background color को border area से सुरु कराती है |
  • content-box —- इससे background image या background color को content के पास से सुरु कराती है |

उदाहरण:

<!doctype html>
<html>
   <head>
      <style>
         body{ background-color:cyan;}
         div{
         width:200px;
         height:150px;
	 margin: 20px;
         padding:20px;
         border:5px dotted blue;
         background-color : white;
         background-repeat : no-repeat;	   
         display: inline-block;
         text-align:center;
        }
         .div1{
         background-clip : padding-box;
        }
         .div2{
         background-clip : border-box;
        }
         .div3{
         background-clip : content-box;
        }
      </style>
   </head>
   <body>
      <div class="div1">
         <p> This Is A Paragraph to describe background properties with background clip from padding area </p>
      </div>
      <div class="div2">
         <p> This Is A Paragraph to describe background properties with background clip from  border corner</p>
      </div>
      <div class="div3">
         <p> This Is A Paragraph to describe background properties with background clip from content area</p>
      </div>
   </body>
</html>

output

background clip example

background property shorthand

background property shorthand से background के सारे properties को एक line में लिख सकतें हैं | और इस property में properties name लीखनी नहीं पड़ती बलकी properties के values को एक क्रम में दी जाती है |

background property shorthand syntax

background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

*** background सेट करते समय जरुरी नहीं की आप सारे properties दें | जो भी properties आप रखना चाहतें हैं background के लिए आप उसकी values को सही क्रम में देकर background सेट कर सकतें हैं |

उदाहरण:

<!doctype html>
<html>
<head>
<style>
 body{
    background: url('D:\\CSSExample\\images\\whiteflower.jpg') /* background-image */
    left top / 300px 300px   /* background-position / background-size */
    no-repeat               /* background-size */
    fixed;                  /* background-attachemnt */
  }		 
</style>
</head>
  <body>
   <div>
     <h1>background image example</h1>
   </div>
  </body>
</html>

multiple background images

css3 में नयी feature डाली गयी है जिससे एक से ज्यादा background image लगा सकतें हैं | इसके लिए images और उसके url को , (comma) से अलग करके background-image property में लिखी जाती है|

Syntax:
{ background-image : url(‘image1’), url(‘image2’), url(‘image3’) };

background-image property में जिस sequence में url लिखी जाएगी वैसे ही image एके के बाद एक सेट होगी | यानि image1 पेहले दिखेगी उसके पीछे image2 और उसके पीछे image3 दिखेगी |

उदाहरण:

<!doctype html>
<html>
<head>
<style>
 body{
      background-image : url('D:\\CSSExample\\images\\flower.jpg'),
		         url('D:\\CSSExample\\images\\lili.jpg'),
		         url('D:\\CSSExample\\images\\whiteflower.jpg');
      background-repeat: no-repeat;		
     }		 
</style>
</head>
 <body>
 </body>
</html>

output

multiple background-image example

multiple background properties कैसे सेट करें

CSS3 में multiple background images लगा सकतें हैं और उसी तरह हर background image के लिए अलग background properties भी दे सकतें हैं | जैसे एक से ज्यादा background images को ,(comma) से अलग करके लिखी जाती है| वैसे ही अन्य properties को ,(comma) से अलग करके लिखी जायेगी|

जिस क्रम में आप background images का url देंगे उसी क्रम उसकी अन्य properties भी देंगें | यानि पेहले background image के लिए पेहले दी गयी अन्य background properties लागु होंगी | और दूसरी background image के लिए दूसरी क्रम की background properties लागु होंगी |

उदाहरण

<!doctype html>
<html>
<head>
<style>
    body{
	 background-image: url('D:\\CSSExample\\images\\whiteflower.jpg'), 
                           url('D:\\CSSExample\\images\\lili.jpg');
	 background-position:left top, top center;
	 background-size: 300px 300px, 200px 200px;
	 background-repeat: no-repeat, repeat;                                             
       }		 
</style>
</head>
 <body>
  <div>
   <h3>background image example</h3>
  </div>
  </body>
</html>

output

multiple background properties example

अन्य CSS tutorial के सुझाव