Tutorial Manthra

The CSS background properties allow you to transform a plain HTML element into a visually engaging component. You can manipulate colors, images, and gradients to create depth, branding, and modern user interfaces.

Background Color (background-color)

The background-color property sets the solid fill of an element. It is the layer that sits behind the content and any background images.

• Best Practice: Always set a background color even if you use an image, as a “fallback” in case the image fails to load.
• Transparency: Use rgba() or hsla() to create see-through backgrounds without affecting the text opacity.

Example Code:

.tm-bgclr{
  /* Using a HEX code */
  background-color: #2c3e50; 
}

.tm-bgol{
  /* Using RGBA for 50% transparency */
  background-color: rgba(0, 0, 0, 0.5); 
}

Background Image (background-image)

This property sets one or more images as the background. By default, the image is placed at the top-left corner and repeated.

• Multiple Backgrounds: You can stack images by separating URLs with a comma. The first image listed is the one closest to the viewer.

Example Code:

.tm-hc {
  /* Single Image */
  background-image: url("forest.jpg");
background-repeat: no-repeat;
}

.tm-sb {
  /* Multiple: a logo over a pattern */
  background-image: url("flowerbg.gif"), url("nature.jpg");
background-repeat: no-repeat;
}

Display Sinlge Image

Multiple Image

Background Repeat (background-repeat)

By default, a background image is repeated both vertically and horizontally to fill the element. This property controls that behavior.

• repeat: Default. Repeats both ways.
• repeat-x: Repeats only horizontally (useful for gradients).
• repeat-y: Repeats only vertically.
• no-repeat: The image is shown only once.
• space / round: Advanced values that distribute the image evenly without clipping.

Example Code:

.tm-oi {
  background-image: url("nature.jpg");
  background-repeat: no-repeat; /* Only one icon */
}

.tm-rpt-top {
  background-image: url("nature.jpg");
  background-repeat: repeat-x; /* Repeats across the top only */
}

.tm-rpt-all {
  background-image: url("nature.jpg");
  background-repeat: repeat; /* Repeats across all sides */
}

No Repeat. Diaplay only single Image

Repeat over the top line only

Repeat all sides

Background Position (background-position)

This defines where the background image starts. You can use keywords, percentages, or specific lengths (px).

• Keywords: left, right, center, top, bottom.
• Coordinates: x-axis y-axis (e.g., 20% 50%).

Example Code:

.tm-cen{
  background-image: url("nature.jpg");
  /* Centers the image perfectly */
  background-position: center; 
}

.tm-custom {
  background-image: url("nature.jpg");
  /* 20px from right, 10px from bottom */
  background-position: right 20px bottom 10px;
}

centres the image

20px from right, 10px from bottom

Background Attachment (background-attachment)

This property determines if the background image moves when the user scrolls the page.

• scroll: Default. The background scrolls along with the element.
• fixed: The background stays fixed relative to the viewport (creates a “Parallax” effect).
• local: The background scrolls with the element’s actual content (useful for scrollable <div>s).

Example Code:

.tm-parallax-bg {
  background-image: url("flower-image.jpg");
  background-attachment: fixed;
}

Background Fixed. Parallax effect

Background Size (background-size)

Crucial for responsive design, this determines how the image is scaled.

• auto: Default. Original dimensions.
• cover: Scales image to fill the container. Some parts may be cropped, but no empty space is left.
• contain: Scales image to fit inside the container. The whole image is visible, but empty space may remain.
• Length: Specific width and height (e.g., 100px 50px).

Example Code:

.tm-full-screen-bg {
  background-size: cover;
  background-position: center;
}

Full Screen BG

Background Origin & Clip

These properties define the “Box” boundaries for the background.

• background-origin: Where the image starts (Border, Padding, or Content box).
• background-clip: Where the background color/image is cut off.

Example Code:

.tm-padding-only-bg {
  padding: 20px;
  border: 10px dashed black;
  background-color: yellow;
  /* Background won't show under the border */
  background-clip: padding-box;
}

Background won’t show under the border

Background Gradients

Gradients are treated as background images. They allow smooth transitions between colors.

• Linear: Along a straight line.
• Radial: From a center point outward.

Example Code:

.gradient-box {
  /* Blue to Green at a 45 degree angle */
  background: linear-gradient(45deg, #3498db, #2ecc71);
}

Background won’t show under the border

Background Shorthand Property

To save time and lines of code, use the background property. The background shorthand property allows you to specify all background properties in a single declaration. Note that background-size must be written after background-position, separated by a forward slash /.

Syntax Order: background: color image repeat attachment position / size;

The correct order of properties when using the shorthand background property is as follows:

• background-color
• background-image
• background-position
• background-size (must be used with /)
• background-repeat
• background-origin
• background-attachment
• background-clip

Example Code:

.shorthand-example {
  background: #000 url("stars.png") no-repeat fixed center / cover;
}

Background Shorthand Example

Summary Table of All Background Properties