CSS मे background-property का उपयोग HTML एलीमेंट्स के लिए बैकग्राउंड रंग जोड़ने के लिए किया जाता है। इस अध्याय में, आप निम्नलिखित CSS बैकग्राउंड प्रॉपर्टी के बारे में जानेंगे।

यहाँ CSS बैकग्राउंड प्रॉपर्टी निम्न प्रकार हैं –

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

CSS background-color

background-color प्रॉपर्टी के द्वारा किसी एलीमेंट का बैकग्राउंड कलर लागू कर सकते है। जैसे – डिव, पैराग्राफ, हेडिंग आदि।

Syntax

p {
  background-color: yellow;
}

Example

<!Doctype HTML>
<html>
<head>
<title>CSS Colors</title>
</head>
<body>
<div style="background-color:yellow; padding:10px;">
<h1 style="background-color: DodgerBlue;">Hello World</h1>
<p style="background-color: Tomato;">Lorem ipsum...</p>
</div>
</body>
</html>

उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा –

Hello World

Lorem ipsum…

CSS में, रंग को प्रायः निम्न प्रकार से निर्दिष्ट किया जाता है –

a valid color name – like “red”
a HEX value – like “#ff0000”
a RGB value – like “rgb(255,0,0)”

Other Elements

आप किसी भी HTML Element के लिए बैकग्राउंड रंग सेट कर सकते हैं:

Syntax
Here, the <h1>, <p>, and <div> elements will have different background colors: 

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Opacity / Transparency

अपारदर्शिता (Opacity) प्रॉपर्टी किसी एलीमेंट की अपारदर्शिता/पारदर्शिता (Opacity/Transparency) निर्दिष्ट करता है। इसका मान 0.0 से 1.0 तक होता है। मान जितना कम होगा, पारदर्शिता (Transparency) उतनी ही ज़्यादा होगी।

Opacity 100%

Opaciy 70%

Opacity 50%

Opacity 20%

निम्न उदाहरण मे Opacity प्रॉपर्टी का उपयोग करना बताया गया है।

CSS Code

.back {
  height: 100px;
  background-color: green;
  opacity: 0.3;
  padding: 10px;
}

HTML Code

<!DOCTYPE html>
<html>
 head><title>CSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="back">
  <h1>This is a Heading</h1>
  <p>This is Paragraph...</p>
</div>
</body>
</html>

उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा –

This is Heading

This is Paragraph…

नोट – किसी एलीमेंट के बैकग्राउंड में Opacity जोड़ने पर उसके सभी चाइल्ड एलिमेंट भी समान Opacity प्राप्त करते हैं। इससे पूरी तरह पारदर्शी एलीमेंट के अंदर का टेक्सट पढ़ना मुश्किल हो सकता है।

Opacity / Transparency using RGBA

यदि आप चाइल्ड एलिमेंट्स पर Opacity लागू नहीं करना चाहते, जैसा कि ऊपर दिए गए उदाहरण में है, तो RGBA रंग मानों का उपयोग करें। निम्नलिखित उदाहरण बैकग्राउंड रंग के लिए अपारदर्शिता निर्धारित करता है, न कि टेक्सट के लिए।

RGBA Syntax

div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% transparency */
}

निम्न उदाहरण मे RGBA वैल्यू के द्वारा एलीमेंट को ट्रांसपैरेंट करना बताया गया है।

CSS Code

.back {
  height: 100px;
  background: rgba(0, 128, 0, 0.3)
  opacity: 0.3;
  padding: 10px;
}

HTML Code

<!DOCTYPE html>
<html>
 head><title>CSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="back">
  <h1>This is a Heading</h1>
  <p>This is Paragraph...</p>
</div>
</body>
</html>

उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा –

This is Heading

This is Paragraph…

CSS background-image

background-image प्रॉपर्टी किसी एलिमेंट के बैकग्राउंड में उपयोग की जाने वाली इमेज निर्दिष्ट करती है। डिफ़ॉल्ट रूप से, इमेज दोहराई जाती है ताकि यह पूरे एलिमेंट को कवर कर सके।

Syntax
Set the background image for a page: 

body {
  background-image: url("image_name.jpg");
}

Beautiful Sunflower Background

This is Background Image Example

बैकग्राउंड इमेज को विशिष्ट एलीमेंट्स के लिए भी सेट किया जा सकता है, जैसे – <div>, <p>, <h1>, <table> आदि।

Syntax

p {
  background-image: url("image_name.jpg");
}

h1 {
  background-image: url("image_name.jpg");
}

CSS background-repeat

background-repeat प्रॉपर्टी यह निर्धारित करती है कि बैकग्राउंड इमेज को दोहराया जाएगा या नहीं/कैसे। डिफ़ॉल्ट रूप से, बैकग्राउंड इमेज लंबवत और क्षैतिज दोनों तरह से दोहराई जाती है।

Example

body {
  background-image: url("image_name.jpg");
}

This is Background Image Example

नोट – उपरोक्त उदाहरण को बेहतर ढंग से समझने के लिए छवि का आकार कम होना चाहिए।

CSS background-repeat Horizontally

अगर आप चाहे तो background-repeat प्रॉपर्टी द्वारा बैकग्राउंड इमेज को सिर्फ क्षैतिज (Horizontally) रिपीट करा सकते है। इसके लिए निम्न प्रॉपर्टी का इस्तेमाल करेंगे।

Syntax

body {
  background: red;
  background-image: url("image_name.jpg");
  background-repeat: repeat-x;
}

This is Background Image Example

Tip: To repeat an image only vertically, use background-repeat: repeat-y;

टिप – किसी इमेज को केवल लंबवत (Vertically) दोहराने के लिए background-repeat: repeat-y; का उपयोग करें।

CSS background-repeat: no-repeat

बैकग्राउंड इमेज को केवल एक बार दिखाना भी background-repeat प्रॉपर्टी द्वारा निर्दिष्ट किया जाता है।

Example
Show the background image only once:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

CSS background-position

background-position प्रॉपर्टी का इस्तेमाल बैकग्राउंड इमेज की शुरुआती स्थिति निर्धारित करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, बैकग्राउंड-इमेज किसी एलिमेंट के ऊपरी-बाएँ कोने में रखी जाती है। background-position प्रॉपर्टी की विभिन्न वैल्यू निम्न प्रकार हैं।

background-position – left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom.

Example
Position the background image in the top-right corner: 

body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS background-attachment

background-attachment प्रॉपर्टी यह निर्दिष्ट करती है कि क्या बैकग्राउंड इमेज को स्क्रॉल किया जाना चाहिए या स्थिर किया जाना चाहिए। background-attachment की दो वैल्यू हैं, 1. Fixed, 2. Scroll.

Example 1
Specify that the background image should be fixed:

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

Example 2
Specify that the background image should scroll with the rest of the page:

body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा –

This is Background Image Example

CSS background – Shorthand property

कोड को छोटा करने के लिए, सभी बैकग्राउंड प्रॉपर्टी को एक ही डेक्लरैशन में निर्दिष्ट करना संभव है। इसे शॉर्टहैंड प्रॉपर्टी कहा जाता है।

Example 1
Use the property to set the background properties in multiple declaration:

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

Example 2
Use the shorthand property to set all the background properties in one declaration:

body {
  background: #ffffff url("image.jpg") no-repeat right top;
}

CSS Gradient

CSS ग्रेडिएंट एक प्रकार का CSS बैकग्राउंड है जो दो या दो से अधिक रंगों को आपस मे मिक्स करता है। CSS Gradient दो प्रकार से काम करता है, 1. Linear-Gradient, 2. Radial Gradient.

CSS Linear-gradient

Linear gradient एक प्रकार का CSS ग्रेडिएंट है जहाँ दो या दो से अधिक रंग एक सीधी रेखा में एक-दूसरे में घुलमिल जाते हैं, एक रंग से दूसरे रंग में क्रमिक रूप से बदलते हैं। CSS Linear gradient को HTML एलीमेंट्स , जैसे- <body>, <div>, <p>, <h1> or <table> आदि के लिए सेट किया जा सकता है।