CSS background property

By: Rajesh P.S.

The background property in CSS offers extensive control over an element's background appearance. It's actually a shorthand for setting several individual properties at once, giving you flexibility to create diverse visual effects. Let's break down its components and explore them with examples:

CSS Background | Sub-properties

background-color: Sets the solid background color of the element.
background-image: Specifies one or more images for the background.
background-position: Controls the placement of the background image(s).
background-size: Defines the dimensions of the background image(s).
background-repeat: Determines how the background image(s) are repeated.
background-origin: Specifies the area where the background image(s) are applied.
background-clip: Defines which part of the element the background image(s) cover.
background-attachment: Controls how the background image(s) behave when the element scrolls.

Shorthand usage

Continue Reading...

You can combine these sub-properties into a single background declaration using a specific order:

background: background-color background-image background-position / background-size background-repeat background-origin background-clip background-attachment;

Example:

.my-element { background: blue url("pattern.png") center no-repeat; }

This example creates a blue background with a centered "pattern.png" image that doesn't repeat.

Here's a detailed breakdown of each aspect of the background property with examples:

Background Color (background-color)

Specifies the background color of an element.

div { background-color: lightblue; }

Background Image (background-image)

Sets an image as the background of an element.

div { background-image: url('example.jpg'); }

Background Repeat (background-repeat)

Defines how a background image should repeat or not repeat.

div { background-repeat: repeat-x; /* horizontally */ background-repeat: repeat-y; /* vertically */ background-repeat: no-repeat; /* no repeat */ }

Background Position (background-position)

Specifies the starting position of a background image.

div { background-position: top left; /* position from the top left corner */ background-position: center center; /* position in the center */ background-position: 50% 50%; /* using percentages */ background-position: 100px 200px; /* using pixels */ }

Background Size (background-size)

Determines the size of a background image.

div { background-size: cover; /* cover the entire element */ background-size: contain; /* fit inside the element without stretching */ background-size: 50% 50%; /* custom size */ background-size: 100px 200px; /* custom size with pixels */ }

Full Source Example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Properties Example</title> <style> .example { width: 400px; height: 300px; background-color: #f0f0f0; background-image: url('example.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; background-origin: content-box; background-clip: border-box; background-attachment: fixed; } </style> </head> <body> <div class="example">  </div> </body> </html>

In this example, a div with a class of .example has a light blue background color, with an image (example.jpg) set as the background, centered and covering the entire space of the div.

Advanced techniques

Multiple background images allow layering of images on an element. Separate declarations with commas to stack them. Example: background: url("image1.jpg"), url("image2.jpg"). Each image is rendered one after another, with the first image listed on top and subsequent ones layered beneath.

Gradient backgrounds utilize functions like linear-gradient or radial-gradient for smooth color transitions. Example: background: linear-gradient (to right, red, blue). This creates a gradient from red to blue, horizontally. By specifying directions and colors, complex gradients can be achieved, enhancing the visual appeal of backgrounds.

Conclusion

The CSS background property enables comprehensive styling of element backgrounds. It encompasses features such as setting background color, images, positioning, repeating behavior, size, gradients, and layering multiple backgrounds. This versatile property allows developers to create visually appealing and customized backgrounds for their web pages efficiently.

Next > CSS Selectors

Related Topics

More Related Topics.....