Background Properties in css

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

Background Properties are the fundamentals for every web developer as they are the building blocks of how a website appears visually. From plain colors all the way through to incredible parallax effects, if you want your website to go from being almost basic to some kind of design master peice then I would recommend you start here.

This is the CSS background and is what makes that website “vibe”. It‘s not just a color, but a collection of exact configurations that allow you to control how images and colors sit behind your content.

The following is a summary in plain language of the most straightforward background properties.

1. Background Color (background-color)

The most simple one. It like the background fillsthe whole element with some solid color.

Example: background-color: lightblue;
Enter any kind of code, name, HEX, RGB, HSL.

2. Background Image (background-image)

Now this allows you to follow an image behind your text in any shape or form you would like.

Example: background-image: url(‘nature. jpg’);
You can even use gradients (e.g. linear-gradient) here too, since CSS seesthat as an image.

3. Background Repeat (background-repeat)

Now if the image is smaller than its parentbox by default “tiled” the image (repeated over and over) with CSS.

repeat: The default (tiles both vertically and horizontally).
no-repeat : The image is displayed only once.
repeat-x / repeat-y: Repeats only along the x, axis, or only down the y, axis..

4. Background Size (background-size)

This, I think is the most basic attribute of modern Web design. Itinstructs the image on how to make the room.

auto: The item uses its original image size.

cover: Image is scaled to fill the box entirely. Part of the image will be cropped if the height and width of the box is not precisely proportional to the image. (Most common for hero banners!)

contain: The image will scale upto fit, but won‘t crop. That could thenleave empty “letterbox” spaces.

5. Background Position (background-position)

If your picture is being cut off (e.g. withcover), this controls which part of the picture you see.

Keywords: top, bottom, left, right side and center.
Example: background-position: center (would keep the photo centered).

6. Background Attachment (background-attachment)

This controls how it behaves when a user scrolls.

scroll: The background is scrolling together with the text (default).
fixed: The background remains fixed while the text ‘scrolls’ over it (the amazing ‘Parallax ‘effect).

The “Shorthand” (All-in-One)
You could do it in just one line of code instead of having to use 6 lines using the background property.

The Order for the : color image repeat attachment position

CSS

/* Short and clean */
.hero {
background: lightblue url(‘sky. jpg’) no-repeat fixed center;
background-size: cover;Size often needs it’s own line or a backslash.
}

Quick Comparison

Property	What it does	Best for…
Size: cover	Fills the whole area	Header images and full-page backgrounds.
Position: center	Centers the image	Making sure faces in photos don’t get cut off.
Attachment: fixed	Background doesn’t move	Creating high-end, “parallax” scrolling effects.
Gradient	Smooth color fades	Creating modern buttons without using heavy images.