MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Have you ever visited a modern website and noticed a stunning, full-screen photo of a mountain, school campus, or city skyline behind the welcome title? 🌄
In CSS, the background family of properties gives you full artistic control over what sits behind your text, cards, and sections.
In this lesson, you will master the 6 core background properties:
background-colorbackground-imagebackground-repeatbackground-positionbackground-size (cover vs contain)background-attachment (fixed parallax effect)Imagine your teacher asks you to decorate the large cork notice board in the back of your classroom:
+-------------------------------------------------------------------------+ | THE NOTICE BOARD BACKGROUND MODEL | +-------------------------------------------------------------------------+ | 1. background-color --> Paint the wooden board soft dark green | | 2. background-image --> Pin a photograph of the school building | | 3. background-repeat --> Do you paste 20 small stickers in a grid, | | or pin ONE single large photo in center? | | 4. background-position --> Pin the photo in the top-right or center? | | 5. background-size --> Stretch photo to COVER the whole board, | | or fit the entire photo without cropping? | | 6. background-attachment --> Does the photo stay fixed on the wall | | even if you walk past it? (Parallax) | +-------------------------------------------------------------------------+
background-colorSets a solid background color behind an element.
background-color as a fallback! If a student's internet is slow and the image takes 5 seconds to download, your white text will still be readable against your dark background color!background-imageTo display a photograph or illustration, use the url() function:
You can pass a local image path (images/hero.png) or a full web link (https://example.com/banner.jpg).
background-repeat (Tiling vs Single)By default, if an image is smaller than the container, web browsers will automatically tile (repeat) it horizontally and vertically like bathroom tiles!
To control repeating, use background-repeat:
| Value | Behavior | Common Use Case |
|---|---|---|
no-repeat | Shows the image only once without tiling | Hero banners, logos, large photos |
repeat (Default) | Tiles the image horizontally and vertically | Small seamless geometric patterns |
repeat-x | Tiles only horizontally (left to right) | Top border ribbons |
repeat-y | Tiles only vertically (top to bottom) | Side wallpaper strips |
background-position (Where Does It Sit?)Sets the starting position of your background image inside the container.
You can combine vertical (top, center, bottom) and horizontal (left, center, right) keywords:
You can also use percentages or pixel measurements:
background-position: 50% 50%; (Exact center)background-position: 20px 40px; (20px from left, 40px from top)background-size (cover vs contain)This is one of the most critical properties in responsive web design! How should the image resize when viewed on a mobile phone vs a giant desktop monitor?
+-----------------------------------+ +-----------------------------------+ | background-size: cover | | background-size: contain | +-----------------------------------+ +-----------------------------------+ | [ Image fills EVERY corner ] | | [ Entire image is visible ] | | • Completely fills the box. | | • No parts of image are cut. | | • No empty spaces left behind. | | • Scales image to fit inside. | | • Small parts may be cropped out.| | • Empty gaps may appear around. | +-----------------------------------+ +-----------------------------------+
cover (Most Popular for Hero Sections ⭐)Stretches and scales the image so that every single pixel of the container is covered. It will never leave empty gaps. If the aspect ratios differ, it will gently crop the outer edges.
contain (Used When Every Detail Matters)Scales the image so the entire picture fits inside the container without any cropping. If the box is wider than the photo, empty space will remain on the sides.
background-attachment (The Parallax Effect)Controls whether the background scrolls along with the webpage or stays glued in place:
scroll (Default): The background image scrolls along as the user scrolls down the page.fixed: The image stays locked to the screen viewpoint! As the user scrolls, the text glides smoothly over the frozen background, creating a stunning 3D Parallax Window Effect.background ShorthandInstead of writing 5 separate lines of CSS, you can combine them into a single background shorthand declaration:
/) between position and size: center / cover. In CSS shorthand, size must always follow position separated by a slash!| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
Forgetting quotes or url(): background-image: photo.jpg; | Write background-image: url('photo.jpg');. | The browser requires the url(...) wrapper to fetch the image file. |
Forgetting a fallback background-color. | Always add a dark or light fallback color. | If the image fails to load, white text on white default background becomes invisible! |
Using width and height instead of background-size. | Use background-size: cover;. | width and height resize the HTML container box, not the background image. |
Forgetting slash in shorthand: center cover. | Write center / cover. | The slash / is required by CSS syntax to distinguish position from size. |
background-color sets a solid color fill and serves as a vital fallback.background-image: url('path') loads an image into the background.background-repeat: no-repeat prevents the image from repeating in a tiled grid.background-position: center centers the image horizontally and vertically.background-size: cover stretches the image to completely fill the element without blank spaces.background-attachment: fixed creates a sleek parallax window scrolling effect.Test your understanding with these multiple-choice questions:
background-size: cover on a container?background-attachment keeps a background image frozen in place while the rest of the page scrolls over it?background shorthand property, what character must separate position and size?background-color when using a background image with white text?hero-banner.html.cover, center, and the dark tint overlay create an incredible, professional hero banner! 🚀In the next lesson, we will continue your web styling journey with CSS Gradients: Linear and Radial Gradients (Colors and Backgrounds).
👉 Continue to Next Lesson: CSS Gradients: Linear and Radial Gradients →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Color Formats: Names, HEX, RGB, and HSL | CSS Gradients: Linear and Radial Gradients |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.