📘 Lesson · Lesson 06

Backgrounds

background-color — the simplest background

.box {
    background-color: #f0f4ff;
}

The plainest background: a solid colour fill behind the element's content and padding. Accepts every colour format from the last chapter (name, hex, rgb, rgba, hsl). Using rgba here gives a see-through tint over whatever is behind. This alone handles most cards, buttons and sections.

background-image — a picture behind content

.hero {
    background-image: url("school.jpg");
}

Places an image behind the element. Two things surprise beginners: (1) by default the image tiles/repeats to fill the space (a small image becomes a grid of copies), and (2) the element must have a height, or there's nothing to show the background in. Both are solved by the properties in the next section. You can also layer: a background-color shows through any transparent parts of the image, and shows while the image loads.

size, position, repeat — controlling the image

.hero {
    background-image: url("school.jpg");
    background-size: cover;         /* fill the whole area, cropping if needed */
    background-position: center;    /* keep the middle of the image visible */
    background-repeat: no-repeat;   /* don't tile it */
    height: 400px;
}

Property	Common values	Effect
background-size	cover / contain / 100px	cover = fill+crop; contain = fit fully inside
background-position	center / top / 50% 20%	Which part stays visible
background-repeat	no-repeat / repeat-x	Tile or not

The full-screen banner recipe (memorise this combo): background-size: cover + background-position: center + background-repeat: no-repeat. This is how every website's hero image fills the screen edge-to-edge without stretching or tiling, staying centred on any screen size. cover vs contain: cover fills the box and crops overflow; contain shrinks the image to fit entirely (possibly leaving gaps). Cover for banners, contain for logos.

Gradients — colors blending, no image needed

/* LINEAR - colors along a line */
background: linear-gradient(to right, navy, skyblue);
background: linear-gradient(135deg, #667eea, #764ba2);

/* RADIAL - colors from a center outward */
background: radial-gradient(circle, gold, orange);

A purple gradient made with pure CSS - no image file

Gradients are smooth colour transitions generated entirely by CSS — no image to download, infinitely scalable, and everywhere in modern design (buttons, hero sections, cards). linear-gradient blends along a direction (to right, or an angle like 135deg); radial-gradient blends outward from a centre. You can add more colours: linear-gradient(to right, red, yellow, green).

The background Shorthand

/* Instead of 4 separate lines: */
background-color: navy;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;

/* Combine into ONE background property: */
background: navy url("bg.jpg") center / cover no-repeat;
            │     │              │       │      │
            color image          position size  repeat

Shorthand properties pack several related settings into one line — a recurring CSS pattern you'll see for margin, padding, border, font too. The background shorthand takes colour, image, position, size (after a /) and repeat in one go. It's cleaner, though beginners often prefer the separate properties until the order feels natural. Both are equally valid.

background-color — सबसे सरल background

.box {
    background-color: #f0f4ff;
}

सबसे सादा background: element के content और padding के पीछे solid colour fill. पिछले chapter का हर colour format लेता है (name, hex, rgb, rgba, hsl). यहां rgba use करने से पीछे जो हो उस पर see-through tint मिलता है. यह अकेला ज़्यादातर cards, buttons और sections संभाल लेता है.

background-image — content के पीछे तस्वीर

.hero {
    background-image: url("school.jpg");
}

Element के पीछे image रखता है. दो चीज़ें beginners को चौंकाती हैं: (1) default रूप से image space भरने को tile/repeat होती है (छोटी image copies का grid बन जाती है), और (2) element की height होनी चाहिए, वरना background दिखाने को कुछ नहीं. दोनों अगले section की properties से हल. Layer भी कर सकते हैं: background-color image के transparent हिस्सों से झलकता है, और image load होते समय दिखता है.

size, position, repeat — image control करना

.hero {
    background-image: url("school.jpg");
    background-size: cover;         /* poora area bharo, zaroorat par crop */
    background-position: center;    /* image ka beech dikhta rahe */
    background-repeat: no-repeat;   /* tile mat karo */
    height: 400px;
}

Property	Common values	असर
background-size	cover / contain / 100px	cover = fill+crop; contain = पूरा अंदर fit
background-position	center / top / 50% 20%	कौन-सा हिस्सा दिखे
background-repeat	no-repeat / repeat-x	Tile या नहीं

Full-screen banner की recipe (यह combo याद रखिए): background-size: cover + background-position: center + background-repeat: no-repeat. हर website का hero image ऐसे ही screen को edge-to-edge भरता है बिना खिंचे या tile हुए, हर screen size पर centred. cover vs contain: cover box भरकर overflow crop करता है; contain image को पूरा fit होने के लिए छोटा करता है (शायद gaps छोड़कर). Banners के लिए cover, logos के लिए contain.

Gradients — colors का मेल, image की ज़रूरत नहीं

/* LINEAR - line ke saath colors */
background: linear-gradient(to right, navy, skyblue);
background: linear-gradient(135deg, #667eea, #764ba2);

/* RADIAL - center se bahar ki taraf colors */
background: radial-gradient(circle, gold, orange);

Shuddh CSS se bana purple gradient - koi image file nahi

Gradients पूरी तरह CSS से बने smooth colour transitions हैं — download को image नहीं, अनंत scalable, और modern design में हर जगह (buttons, hero sections, cards). linear-gradient एक दिशा में blend करता है (to right, या 135deg जैसा angle); radial-gradient center से बाहर. और colours जोड़ सकते हैं: linear-gradient(to right, red, yellow, green).

background Shorthand

/* 4 alag lines ke bajaye: */
background-color: navy;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;

/* EK background property me jodo: */
background: navy url("bg.jpg") center / cover no-repeat;
            │     │              │       │      │
            color image          position size  repeat

Shorthand properties कई related settings एक line में समेटती हैं — CSS का बार-बार दिखने वाला pattern जो margin, padding, border, font के लिए भी मिलेगा. background shorthand colour, image, position, size (/ के बाद) और repeat एक साथ लेता है. साफ है, हालांकि beginners अक्सर separate properties पसंद करते हैं जब तक order स्वाभाविक न लगे. दोनों बराबर valid.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.