CSS

🎯 What is background-image?

The background-image property displays an image behind an element’s content.

It is commonly used in:

website backgrounds
hero sections
banners
cards
modern UI designs

🧩 Simple Definition

CSS

background-image = places an image behind an element

💡 Basic Syntax

CSS

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

👉 The url() function specifies the image path.

🧠 Example

CSS


div {
  background-image: url("background.jpg");
}

This applies background.jpg as the background image of the <div> element.

⚙️ Accepted Values

Value	Description
none	Removes the background image
url()	Applies an image as the background
initial	Resets to default value
inherit	Inherits the value from the parent element

🔹 Using none

CSS

background-image: none;

👉 Removes any background image.

This is also the default value.

🔹 Using initial

CSS

background-image: initial;

👉 Resets the property to its default state.

🔹 Using inherit

CSS

background-image: inherit;

👉 The element uses the same background image as its parent element.

🧩 Practical Examples

1. Background Image for a Box

HTML


<div style="background-image: url('nature.jpg');">
    This box has a background image.
</div>

2. Full Page Background

CSS


body {
  background-image: url("wallpaper.jpg");
}

👉 Applies an image to the entire webpage background.

🎨 Commonly Used Background Properties

The background-image property is often used together with other background properties.

Property	Purpose
background-repeat	Controls image repetition
background-size	Controls image size
background-position	Controls image position
background-attachment	Controls scrolling behavior

🧩 Example with Additional Properties

CSS


body {

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

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

🧠 Explanation

background-repeat: no-repeat;

Prevents the image from repeating.

background-size: cover;

Makes the image cover the entire element.

background-position: center;

Centers the image.

⚠️ Important Note

Background images are placed behind the content.

If the image is too bright or too detailed, text readability may decrease.

A common solution is:

using darker images
adding overlays
using semi-transparent backgrounds

🧩 Example with Overlay Effect

CSS


.hero {

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

  background-color: rgba(0, 0, 0, 0.5);

}

CSS Background Color

CSS Background Repeat