CSS background properties in Hindi

Posted on by

CSS background properties in hindi के इस लेख में आप सीखेंगे की HTML Elements पर कैसे background set कर सकते है | आप HTML Element पर निम्न दिए गए CSS Background properties set कर सकते है |

  • background-color property का use किसी भी HTML Element पर background color set करने के लिए किया जाता है |
  • background-image property का use किसी भी HTML Element पर background image set करने के लिए किया जाता है |
  • background-repeat property का उपयोग किसी भी image का repeat होने पर control करने के लिए किया जाता है |
  • background-position का उपयोग background image की position को control करने के लिए किया जाता है |
  • background-attachment का उपयोग किसी भी image की scrolling को control करने के लिए किया जाता है |
  • अन्य सभी background properties को specify करने के लिए background property को shorthand की तरह उपयोग में लिया जाता है |
Contents hide
1 CSS background color in Hindi
2 CSS background image in Hindi
3 CSS background image repeat in Hindi
4 Background image position in css
5 CSS me background image ko fix position kaise kare

CSS background color in Hindi

निम्न उदहारण जो दर्शाता है की web page के HTML elements पर कैसे background color set कर सकते है |

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:red;">
         This background color example in css.
      </p>
   </body>
</html>

Output

This background color example in css.

CSS background image in Hindi

हम css का उपयोग कर के HTML Web Page के Elements पर background image set कर सकते है |

आइये निचे दिए गए उदहारण की सहायता से इसे समझने की कोशिश करते है |

<html>
   <head>
      <style>
         body  {
            background-image: url("http://techsamundra.com/wp-content/uploads/2023/03/test-bg-e1678167183780.jpg");

         }
      </style>
   </head>
   
   <body>
      <p>test  background image</p>
   </body>
<html>

Output

test background image

CSS background image repeat in Hindi

कईबार जब हम अपने HTML Web Page के किसी Element पर background image set करते है तो image की size small होने की वजह से background image default रूप से repeat होती है | जैसे की ऊपर के उदाहरण के output में हो रहा है |

लेकिन CSS की background-repeat property के जरिये इसे control कर सकते है |

यदि आप किसी image को repeat करवाना नहीं चाहते है तो आप background-repeat property में no-repeat value set कर सकते है |

चलिए इसे निचे दिए गए उदहारण के जरिये समझने की कोशिश करते है |

<html>
  <head>
   <style>
     body {
      background-image: url("http://techsamundra.com/wp-content/uploads/2023/03/test-bg-e1678167183780.jpg");
      background-repeat: no-repeat;
     }
   </style>
  </head>

  <body>

Output

test background image

आप background image को vertical या horizontal repeat भी कर सकते है |

निम्न उदहारण background image को vertical repeat करता है |

<html>
  <head>
   <style>
     body {
      background-image: url("http://techsamundra.com/wp-content/uploads/2023/03/repeat-image.jpg");
      background-repeat: repeat-y;
     }
   </style>
  </head>

  <body>
   <p>Vertical repeat example</p>
  </body>
</html>

Output

Vertical repeat example

निम्न उदहारण background image को horizontal repeat करता है |

<html>
  <head>
   <style>
     body {
      background-image: url("http://techsamundra.com/wp-content/uploads/2023/03/repeat-image.jpg");
      background-repeat: repeat-x;
     }
   </style>
  </head>

  <body>
   <p>Horizontal repeat example</p>
  </body>
</html>

Output

Vertical repeat example

Background image position in css

हम CSS की healp से HTML element के background image की position भी set कर सकते है |

background image की position के लिए background-position property का उपयोग किया जाता है , और उसकी value के तौर पर हम X और Y की position दी जाती है |

background-position में first value X होती है, और second value Y होती है |

X horizontal यानि की left से right तक की position set करेगा और Y vertical यानि top से bottom तक की value set करेगा |

Example

  <head>
   <style>
     body {
      background-image: url("http://techsamundra.com/wp-content/uploads/2023/03/repeat-image.jpg");
      background-position:100px 100px;
     }
   </style>
  </head>

  <body>
   <p>Background image position example</p>
  </body>
</html>

Output

Vertical repeat example

CSS me background image ko fix position kaise kare

CSS में किसी भी HTML Element के background image को fixed position पर रखना हो, means की यदि हम Web page या element को scroll करे तो background image, content के साथ scroll नहीं होनी चाहिए | तो उसके लिए हम CSS की background-attachment property का use कर के background image की scrolling को control कर सकते है |

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('http://techsamundra.com/wp-content/uploads/2023/03/repeat-image.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
      <p>Copy the code the code and try it from your local pc</p>
   </body>
</html>

यह भी पढ़े :-