learn2kode.in

Menu

CSS Tutorial

Menu

CSS Backgrounds

CSS backgrounds allow you to style the behind-area of any HTML element. You can add solid colors, images, gradients, patterns, or even create layered backgrounds. Background properties help enhance design, readability, and the overall visual appeal of your website.

1. Background Color

The background-color property sets a solid color behind an element.

Copy Text 
box {
  background-color: lightblue;
}

You can use:

  • Color names (red, blue)
  • HEX codes (#ff5733)
  • RGB / RGBA
  • HSL / HSLA

2. Background Image

You can add an image behind an element using:

Copy Text 
box {
  background-image: url("image.jpg");
}

This image can be repeated, positioned, or sized based on your needs.

3. Background Repeat

Controls whether the image repeats:

  • repeat (default) – repeats both directions
  • repeat-x – horizontal repeat
  • repeat-y – vertical repeat
  • no-repeat – show only once

Example

Copy Text 
box {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

4. Background Position

Used to control image placement:

Copy Text 
box {
  background-position: center top;
}

Common values:

  • left, right
  • top, bottom
  • center
  • Pixel values (50px 20px)
  • Percentage (50% 0%)

5. Background Size

Controls the display size of background images.

Values

  • auto → original size
  • cover → fills entire area (cropping may happen)
  • contain → fits inside area (may leave empty space)

Example

Copy Text 
box {
  background-size: cover;
}

6. Background Attachment

Defines scrolling behavior:

  • scroll → moves with page (default)
  • fixed → stays fixed when scrolling (parallax effect)
  • local → scrolls inside element
Copy Text 
box {
  background-attachment: fixed;
}

7. Background Shorthand

You can combine all background properties:

Copy Text 
box {
  background: url("bg.jpg") no-repeat center/cover fixed;
}

Order doesn’t have to be exact, but this format is commonly used.

8. Multiple Backgrounds

CSS supports layered backgrounds:

Copy Text 
box {
  background:
    url("overlay.png") no-repeat center,
    url("main-bg.jpg") center/cover;
}
CSS Text