CSS Backgrounds

CSS backgrounds are used to control the background appearance of HTML elements. They allow you to add colors, images, gradients, and control how backgrounds are positioned and repeated.

Background Color

The background-color property sets the background color of an element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:green;
}
</style>
</head>
<body>

<p>Green Color</p>

</body>
</html>

Try this code

Background Image

The background-image property is used to add an image as a background.

background-image: url("image.jpg");

Example

<!DOCTYPE html>
<html>
<head> 
<style>
body {
  background-image: url("sun.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:100vh;
  display:block;
}
</style>
</head>
<body>

<p>Green Color</p>

</body>
</html>

Try this code

Background Repeat

By default, the background-repeat property repeats an image both horizontally and vertically to cover the entire element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: repeat;
}
<</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Repeat Horizontally

If you want an image to repeat only from left to right, use the repeat-x value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: repeat-x;
}
<</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Repeat Vertically

If you want an image to repeat only from top to bottom, use the repeat-y value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: repeat-y;
}
<</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

No Repeat

Use no-repeat if you want to show the background image only once without any repetition.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
}
<</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Background Position

The background-position property defines the starting position of a background image.

Left Position

The left value positions the background image on the left side of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: left; 
}
<</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Right Position

The right value positions the background image on the right side of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: right; 
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Top Position

The top value positions the background image at the top of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: top; 
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Bottom Position

The bottom value positions the background image at the bottom of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: bottom; 
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Center Position

The center value positions the background image exactly in the middle of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: center; 
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Note: If you only specify one keyword, the other side will automatically be set to 'center'. For example, if you set 'left', it will be horizontally left and vertically center.

Top Right Position

The top right value positions the background image at the top-right corner of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: top right; 
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Bottom Left Position

The bottom left value positions the background image at the bottom-left corner of the element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: bottom left; 
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Try this code

Background Size

The background-size property is used to specify the size of the background image. There are three most common ways to use it:

The `cover` Keyword

The cover value scales the background image so that the entire container is completely covered by the image. It may crop some parts of the image to ensure no empty space is left.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-size: cover;
}
</style>
</head>
<body>

</body>
</html>

Try this code

The `contain` Keyword

The contain value scales the image to the largest size such that both its width and height can fit inside the container. This ensures the entire image is visible, but it might leave some empty space in the container.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-size: contain;
    background-repeat: no-repeat;
}
</style>
</head>
<body>

</body>
</html>

Try this code

Using Percentage or Pixels

You can also set the exact width and height of the background image manually using pixels (px) or percentage (%). The first value is for width and the second is for height.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-size: 100% 100%;
}
</style>
</head>
<body>

</body>
</html>

Try this code

Background Attachment

The background-attachment property specifies whether the background image should scroll with the rest of the page, or be fixed.

Background Attachment Fixed

The fixed value specifies that the background image should not scroll with the rest of the page. It stays in the same position even when you scroll down.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
</style>
</head>
<body>

</body>
</html>

Try this code

Background Attachment Scroll

The scroll value is the default setting. It specifies that the background image will scroll along with the rest of the page content.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("tree.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
}
</style>
</head>
<body>

</body>
</html>

Try this code

Shorthand Background Property

Multiple background properties can be written using a single shorthand property.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: #ffffff url("tree.webp") no-repeat center / cover;
}
</style>
</head>
<body>

</body>
</html>

Try this code

Multiple Backgrounds

CSS allows you to apply multiple background images to a single element.

.card {
  background-image: url("layer1.png"), url("layer2.png");
}

Background Gradients

CSS gradients allow smooth transitions between two or more colors without using images.

.gradient {
  background: linear-gradient(to right, #00c6ff, #0072ff);
}

Radial Gradient

Radial gradients spread outward from a center point.

.circle {
  background: radial-gradient(circle, #ffcc00, #ff6600);
}

Best Practices for Backgrounds

Use optimized images to improve performance
Ensure text readability over backgrounds
Avoid overusing fixed backgrounds
Use gradients for modern designs

Common Mistakes with Backgrounds

Large unoptimized background images
Poor contrast between text and background
Incorrect background positioning

Tip: Use background-size: cover; for full-width responsive background images.

CSS Backgrounds

Background Color

Background Image

Background Repeat

Repeat Horizontally

Repeat Vertically

No Repeat

Background Position

Left Position

Right Position

Top Position

Bottom Position

Center Position

Top Right Position

Bottom Left Position

Background Size

The cover Keyword

The contain Keyword

Using Percentage or Pixels

Background Attachment

Background Attachment Fixed

Background Attachment Scroll

Shorthand Background Property

Multiple Backgrounds

Background Gradients

Radial Gradient

Best Practices for Backgrounds

Common Mistakes with Backgrounds

The `cover` Keyword

The `contain` Keyword