Mastering CSS Backgrounds: Colors, Images, and More

Learn how to style backgrounds in CSS with color, images, and advanced techniques. This guide covers setting background colors and images, controlling repetition, and positioning for creating visually appealing and dynamic web designs. Enhance your CSS skills now!

Styling Backgrounds with CSS

CSS provides powerful tools to style the background of HTML elements. You can set background colors, images, and control how they behave with scrolling and positioning.

1. `background-color`

Sets the background color of an element. 


/* Example */
element {
  background-color: lightblue; 
}

Test it Now

2. `background-image`

Sets a background image for an element. By default, the image will tile (repeat) to cover the entire element.


/* Example */
element {
  background-image: url('myimage.jpg');
}

Note: Choose background images that complement your text color for optimal readability.

Test it Now

3. `background-repeat`

Controls how a background image is repeated. By default, it repeats both horizontally and vertically.

Values:

  • repeat: (Default) Repeats in both directions.
  • repeat-x: Repeats horizontally only.
  • repeat-y: Repeats vertically only.
  • no-repeat: Doesn't repeat the image.

Test `repeat-x` Now

Test `repeat-y` Now

4. `background-attachment`

Determines whether the background image scrolls with the page content or remains fixed in the viewport.

Values:

  • scroll: (Default) Image scrolls with the page.
  • fixed: Image remains fixed while the page scrolls.

Test `fixed` Now

5. `background-position`

Sets the starting position of the background image. The default is `top left`.

Possible Values:

  • center
  • top, bottom
  • left, right
  • Keywords combined (e.g., `center bottom`)
  • Length values (e.g., `10px 20px`)

Test `center` Now