CSS Background में सामग्री या तत्व के लिए एक Background प्रभाव को परिभाषित करने के लिए उपयोग किया जाता है. Background की Property को लागू करने के विभिन्न तरीके हैं. Background Property हमें किसी भी तत्व की Background को नियंत्रित करने की अनुमति देती है.
Background को Set करने के लिए CSS आपको बहुत सी Properties Provide करती है. आप एक HTML Element का Background Set करने के लिये नीचे लिखी Properties का उपयोग कर सकते है.
background-color
background-image
background-repeat
background-attachment
background-position
CSS में किसी भी box या div या font या Background को Color Set करने के लिए आप background-color Property का उपयोग कर करते है. इस Property की Value को आप Color के नाम से डिफाइन कर सकते या फिर इसके आलावा Hex Code से डिफाइन कर सकते है. इस Property की Value आप Color का नाम या Hex Code दे सकते है.
<!DOCTYPE HTML>
<html>
<head>
<style>
h3,p{
background-color: lightblue;
}
</style>
</head>
<body>
<h3>This is first CSS page.</h3>
<p>Hello Tutorial Root. This is an example of CSS background-color</p>
<h1>CSS First Example</h1>
<p>This is paragraph.</p>
</body>
</html>
CSS के द्वारा Image को Background के रूप मे Set किया जा सकता है. इसके लिए background-image Property उपयोग की जाती है. इस Property की Value के रूप मे Image का url दिया जाता है.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
Background-image Property Horizontal और Vertical रूप से Background Image को Repeat करता है.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>CSS Tutorials</p>
<p>This page has an Repeat Background Image</p>
</body>
</html>
Background-position का उपयोग Background Image की Position को Control करने के लिये किया जाता है.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("images/norept-back.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>CSS Tutorials</>
</body>
</html>