HTML में बैकग्राउंड कलर कैसे सेट करें?

परिचय

HTML में बैकग्राउंड कलर सेट करने के लिए, style एट्रिब्यूट का उपयोग करें। style एट्रिब्यूट एक एलिमेंट के लिए इंलाइन स्टाइल निर्दिष्ट करता है। यह एट्रिब्यूट HTML <body> टैग के साथ, CSS प्रॉपर्टी background-color के साथ उपयोग किया जाता है। HTML5 <body> टैग के bgcolor एट्रिब्यूट का समर्थन नहीं करता, इसलिए बैकग्राउंड कलर जोड़ने के लिए CSS स्टाइल का उपयोग किया जाता है। bgcolor एट्रिब्यूट HTML5 में डिप्रिकेटेड है।

महत्वपूर्ण नोट

style एट्रिब्यूट का उपयोग ग्लोबली सेट किसी भी स्टाइल को ओवरराइड करता है। यह HTML <style> टैग या एक्सटर्नल स्टाइल शीट में सेट किसी भी स्टाइल को ओवरराइड कर देगा।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Background Color</title> 
    </head> 
    <body style="background-color:grey;"> 
        <h1>Products</h1> 
        <p>हमने अब तक 10 से अधिक उत्पाद विकसित किए हैं।</p> 
    </body> 
</html>

आउटपुट

बैकग्राउंड कलर लागू करने के तरीके

1. इंलाइन स्टाइल (त्वरित परीक्षण के लिए)

<body style="background-color: #f5f5f5;">
<div style="background-color: white; padding: 20px; border-radius: 8px;">
    कंटेंट बॉक्स
</div>

2. इंटरनल/एक्सटर्नल CSS (अनुशंसित)

<style>
    body {
        background-color: #f8f9fa;
    }
    
    .card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .hero {
        background-color: #2c3e50;
        color: white;
    }
</style>

उन्नत बैकग्राउंड प्रॉपर्टीज

बैकग्राउंड इमेज

<style>
    .hero {
        background-image: url('hero.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed; /* पैरलैक्स इफेक्ट */
        min-height: 400px;
    }
</style>

ग्रेडिएंट बैकग्राउंड

<style>
    .gradient-bg {
        /* लीनियर ग्रेडिएंट */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        
        /* रेडियल ग्रेडिएंट */
        background: radial-gradient(circle at center, #667eea, #764ba2);
        
        /* कोणीय ग्रेडिएंट */
        background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
        
        /* मल्टीपल ग्रेडिएंट्स */
        background: 
            linear-gradient(45deg, rgba(102,126,234,0.5), rgba(118,75,162,0.5)),
            url('pattern.png');
    }
</style>

मल्टीपल बैकग्राउंड्स

<style>
    .multi-bg {
        background: 
            url('overlay.png') center / cover no-repeat,
            linear-gradient(135deg, #667eea, #764ba2),
            #f0f0f0; /* फॉलबैक कलर */
        background-blend-mode: overlay, multiply, normal;
    }
</style>

बैकग्राउंड शॉर्टहैंड

<style>
    /* क्रम: color image repeat attachment position / size origin clip */
    .shorthand {
        background: #f0f0f0 url('bg.jpg') no-repeat fixed center / cover;
    }
</style>

CSS कस्टम प्रॉपर्टीज के साथ

<style>
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --bg-tertiary: #e9ecef;
        --bg-dark: #212529;
        --bg-gradient: linear-gradient(135deg, #667eea, #764ba2);
    }
    
    body { background-color: var(--bg-primary); }
    .card { background-color: var(--bg-secondary); }
    .hero { background: var(--bg-gradient); }
    
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-primary: #121212;
            --bg-secondary: #1e1e1e;
            --bg-tertiary: #2d2d2d;
        }
    }
</style>

पुराना अप्रचलित तरीका (उपयोग न करें)

<!-- HTML5 में डिप्रिकेटेड -->
<body bgcolor="grey">
<table bgcolor="#ff0000">
<td bgcolor="yellow">

सर्वोत्तम अभ्यास

1. CSS क्लासेज/वेरिएबल्स उपयोग करें - इंलाइन स्टाइल्स के बजाय
2. फॉलबैक कलर हमेशा प्रदान करें - ग्रेडिएंट/इमेज लोड न होने पर
3. कंट्रास्ट सुनिश्चित करें - टेक्स्ट पठनीयता के लिए
4. प्रदर्शन के लिए ऑप्टिमाइज़ करें - बड़ी इमेजेस के बजाय ग्रेडिएंट्स/पैटर्न्स
5. डार्क मोड सपोर्ट जोड़ें - prefers-color-scheme मीडिया क्वेरी
6. background-attachment: fixed मोबाइल पर सावधानी से उपयोग करें - प्रदर्शन प्रभाव

त्वरित संदर्भ: सामान्य कलर्स