CSS Background

Module: M2-R5: Web Design & Publishing

Chapter: Css

Introduction to Background Properties

The CSS background properties are used to style the background of elements. They define how the background color, image, position, size, and attachment behave. By mastering these properties, web designers can create visually attractive pages with textures, gradients, or custom images.

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-attachment
  • background (shorthand)

1. background-color

The background-color property sets the background color of an element. It accepts color names, HEX, RGB, RGBA, or HSL values.

Syntax: background-color: color;

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightblue;
  padding: 20px;
  font-size: 18px;
}
</style>
</head>
<body>
  <div>This div has a light blue background.</div>
</body>
</html>

Explanation: The background-color gives the box a solid light blue background.

2. background-image

The background-image property is used to set one or more images as the background of an element.

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

<style>
div {
  background-image: url('https://picsum.photos/400/200');
  height: 200px;
  color: white;
  text-align: center;
  line-height: 200px;
}
</style>
<div>Background Image Example</div>

Explanation: A background image fills the div element, and text is placed over it.

3. background-repeat

Defines how a background image repeats. Common values: repeat, no-repeat, repeat-x, repeat-y.

Syntax: background-repeat: no-repeat;

<style>
div {
  background-image: url('https://picsum.photos/100');
  background-repeat: repeat-x;
  height: 150px;
}
</style>
<div></div>

Explanation: The small image repeats horizontally across the div.

4. background-position

Specifies the starting position of a background image. You can use keywords like top, center, bottom, left, right or percentage/pixel values.

Syntax: background-position: center top;

<style>
div {
  background-image: url('https://picsum.photos/300/200');
  background-repeat: no-repeat;
  background-position: right bottom;
  height: 200px;
  border: 2px solid #333;
}
</style>
<div></div>

Explanation: The image appears at the bottom-right corner of the element.

5. background-size

Controls the size of the background image. Common values: auto, cover, contain, or specific pixel/percentage sizes.

Syntax: background-size: cover;

<style>
div {
  background-image: url('https://picsum.photos/400/300');
  background-size: cover;
  height: 250px;
}
</style>
<div></div>

Explanation: The image scales to completely cover the element, maintaining its aspect ratio.

6. background-attachment

Determines whether the background image scrolls with the page or stays fixed.

Syntax: background-attachment: fixed;

<style>
body {
  background-image: url('https://picsum.photos/800/600');
  background-attachment: fixed;
  background-size: cover;
  height: 1500px;
  color: white;
}
</style>
<body>
  <h1>Fixed Background Example</h1>
</body>

Explanation: The background image remains fixed as you scroll down the page.

7. background (Shorthand Property)

The background shorthand allows you to set all background properties in one line.

Syntax: background: [color] [image] [position] [size] [repeat] [attachment];

<style>
div {
  background: #ffecd2 url('https://picsum.photos/400/300') no-repeat center/cover fixed;
  height: 250px;
  color: #333;
  text-align: center;
  line-height: 250px;
  font-weight: bold;
}
</style>
<div>Shorthand Example</div>

Explanation: The shorthand combines all background settings (color, image, position, size, repeat, and attachment) in one declaration.

Conclusion

CSS background properties give you full control over the appearance of web elements. Whether it’s a solid color, gradient, or image, using these properties creatively can make your web design more engaging.

O Level Modules

Quick Links