Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS में एलिमेंट्स के बैकग्राउंड को स्टाइल करना


background शॉर्टहैंड प्रॉपर्टी

किसी एलिमेंट के बैकग्राउंड प्रॉपर्टीज़ को background एट्रिब्यूट से निर्दिष्ट करें। यह निम्न मान ले सकता है: background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin, background-attachment।

सिंटैक्स

Selector { background: /*value*/ }

उदाहरण 1

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat;
  font-size: 1.2em; color: black;
}
h2 { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px black; }
p { box-shadow: 0 0 5px 5px black; }
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>This is demo text...</p>
<ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li></ul>
</body>
</html>

आउटपुट

CSS में एलिमेंट्स के बैकग्राउंड को स्टाइल करना

उदाहरण 2

<!DOCTYPE html>
<html>
<head>
<style>
h2 { background-color: bisque; }
div { margin: auto; background-color:orange; width: 40%; }
</style>
</head>
<body>
<h2>Demo Text</h2>
<div>demo demo demo demo</div>
</body>
</html>

आउटपुट

CSS में एलिमेंट्स के बैकग्राउंड को स्टाइल करना


  1. CSS से टेक्स्ट इंडेंटेशन CSS से टेक्स्ट इंडेंटेशन

    text-indent प्रॉपर्टी टेक्स्ट इंडेंटेशन के लिए CSS में text-indent प्रॉपर्टी का उपयोग करें। यह पैराग्राफ की पहली लाइन की इंडेंटेशन के लिए है। उदाहरण 1: 30px इंडेंट <!DOCTYPE html> <html> <head> <style> div { text-indent: 30px; } </style> </head> <body> <

  1. CSS से एलिमेंट्स के बैकग्राउंड को स्टाइल करना CSS से एलिमेंट्स के बैकग्राउंड को स्टाइल करना

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

  1. CSS से Z-Index का उपयोग करके ओवरलैपिंग एलिमेंट्स CSS से Z-Index का उपयोग करके ओवरलैपिंग एलिमेंट्स

    CSS Z-Index प्रॉपर्टी का उपयोग करके डेवलपर एलिमेंट्स को एक-दूसरे के ऊपर स्टैक कर सकते हैं। Z-Index का मान पॉजिटिव या नेगेटिव हो सकता है।नोट - यदि ओवरलैप होने वाले एलिमेंट्स में z-index स्पेसिफाई नहीं है तो वह एलिमेंट दिखेगा जो डॉक्यूमेंट में अंत में मेंशन किया गया है।उदाहरणआइए z-index प्रॉपर्टी का ए