CSS Backgrounds

CSS background attributes are used to define element background effects. There are several properties available for designing the backdrop.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: url("https://webtutor.dev/images/webtutor.jpg") no-repeat fixed center;
    }
</style>
</head>
<body>

</body>
</html>

Preview

1. background-color

In CSS, the background-color property is used to specify the color of an element's background.

Example

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

</body>
</html>

Preview

2. background-image

The background-image attribute is used to assign an element one or more background images.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body  {
        background-image: url("https://webtutor.dev/images/webtutor.jpg");
    }
</style>
</head>
<body>

</body>
</html>

Preview

3. background-position

The body-position property in CSS is mostly used to place an image.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-image: url("https://webtutor.dev/images/webtutor.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }
</style>
</head>
<body>

</body>
</html>

Preview

4. background-size

In CSS, the background-size property is used to specify the size of the background images.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1{
        border: 2px solid #212b36;
        height:150px;
        background: url('https://webtutor.dev/images/flower.jpg');
        background-repeat: no-repeat;
        background-size: auto;
    }
    .ex2{
        border: 2px solid #212b36;
        height:150px;
        background: url('https://webtutor.dev/images/flower.jpg');
        background-repeat: no-repeat;
        background-size: 300px 150px;
    }
</style>
</head>
<body>

<h2>background-size: auto</h2>
<div class="ex1"></div>

<h2>background-size: 300px 150px</h2>
<div class="ex2"></div>

</body>
</html>

Preview

5. background-repeat

In CSS, the background-repeat property is used to repeat the background picture horizontally and vertically.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-image: url("https://webtutor.dev/images/pattern.png");
        background-repeat: repeat-x;
    }
</style>
</head>
<body>

</body>
</html>

Preview

6. background-origin

Background-origin is a CSS feature that allows you to change the background picture of a webpage.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border: 5px dashed #212b36;
        padding: 25px;
        background: url("https://webtutor.dev/images/pattern.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
    }
    .ex2 {
        border: 5px dashed #212b36;
        padding: 25px;
        background: url("https://webtutor.dev/images/pattern.png");
        background-repeat: no-repeat;
        background-origin: border-box;
    }
    .ex3 {
        border: 5px dashed #212b36;
        padding: 25px;
        background: url("https://webtutor.dev/images/pattern.png");
        background-repeat: no-repeat;
        background-origin: content-box;
    }
    </style>
</head>
<body>

<h2>background-origin: padding-box</h2>
<p class="ex1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<h2>background-origin: border-box</h2>
<p class="ex2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<h2>background-origin: content-box</h2>
<p class="ex3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

</body>
</html>

Preview

7. background-clip

The background-clip CSS attribute specifies how to expand the background (color or image).

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .border-box {
        border: 5px dashed #212b36;
        padding: 10px;
        background: lightgreen;
        background-clip: border-box;
    }
    .padding-box {
        border: 5px dashed #212b36;
        padding: 10px;
        background: lightpink;
        background-clip: padding-box;
    }
    .content-box {
        border: 5px dashed #212b36;
        padding: 10px;
        background: lightblue;
        background-clip: content-box;
    }
</style>
</head>
<body>

<h2>background-clip: border-box</h2>
<div class="border-box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<h2>background-clip: padding-box</h2>
<div class="padding-box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<h2>background-clip: content-box</h2>
<div class="content-box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

</body>
</html>

Preview

8. background-attachment

In CSS, the background-attachment property is used to describe the type of attachment of the background image to its container. It may be configured to scroll or to remain stationary. It is applicable to all HTML components.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-image: url("https://webtutor.dev/images/webtutor.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 1000px;
    }
</style>
</head>
<body>

</body>
</html>

Preview

FAQs

One common issue that can cause background images not to show is when the element has no width or height, which can be resolved by giving the element dimensions or adding overflow property.

Yes, you can use multiple background images in CSS. You can use the background-image property multiple times, separating each image with a comma. You can also specify other background properties like background-position and background-repeat for each image. Keep in mind that the order of the images in the background-image property determines the stacking order, with the first image listed on top.

To swap backgrounds on hover in CSS, you can use the :hover selector and set the background-image property to the desired image.

Here’s an example:

.element {
  background-image: url('image1.jpg');
  /* other background properties */
}

.element:hover {
  background-image: url('image2.jpg');
}

In this example, when the user hovers over the element, the background image will change from image1.jpg to image2.jpg. You can apply this technique to any element that has a background image set.

CSS Colors

CSS Borders

CSS Backgrounds

Example

1. background-color

Example

2. background-image

Example

3. background-position

Example

4. background-size

Example

5. background-repeat

Example

6. background-origin

Example

7. background-clip

Example

8. background-attachment

Example

FAQs

Links

Tutorials

Connect with us

CSS Backgrounds

Example

1. background-color

Example

2. background-image

Example

3. background-position

Example

4. background-size

Example

5. background-repeat

Example

6. background-origin

Example

7. background-clip

Example

8. background-attachment

Example

FAQs

Why does the background image sometimes not show?

Can I use multiple background images in CSS?

How do I swap backgrounds on hover in CSS?