CSS Backgrounds

CSS CODES & EXAMPLES

CSS Backgrounds

Learn how to create professional backgrounds using CSS. This lesson covers background colors, images, gradients, positioning, sizing, repetition, attachment and multiple backgrounds.

← CSS Colors Start Learning →

What are CSS Backgrounds?

Control the visual background of an element

CSS background properties are used to control the background appearance of HTML elements. You can use a solid color, image, gradient or multiple background layers.

Important Background Properties: background-color background-image background-repeat background-position background-size background-attachment

Background Color

Set a solid background color

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

background-color.css

body {
  background-color: #f3f8ff;
}

.card {
  background-color: white;
}

.header {
  background-color: #1769d5;
}

Blue Background

Light Background

Dark Background

Background Image

Add an image behind an element

The background-image property allows you to place an image as the background of an element.

background-image.css

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

Background Image

Text can be placed over a background image.

Background Repeat

Control whether the background image repeats

By default, background images can repeat. The background-repeat property controls this behavior.

background-repeat.css

.box {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

.horizontal {
  background-repeat: repeat-x;
}

.vertical {
  background-repeat: repeat-y;

}

no-repeat Image appears once

repeat-x Repeats horizontally

repeat-y Repeats vertically

Background Size

Control the size of a background image

The background-size property controls the dimensions of a background image.

background-size.css

.cover {
  background-size: cover;
}

.contain {
  background-size: contain;
}

.custom {
  background-size: 300px 200px;
}

cover Fills the complete area

contain Shows the complete image

Background Position

Choose where the image appears

Use background-position to control the starting position of the background image.

background-position.css

.center {
  background-position: center;
}

.top {
  background-position: top;
}

.bottom {
  background-position: bottom;

}

.custom {
  background-position: 20% 40%;
}

CENTER

TOP

BOTTOM

Background Attachment

Control background scrolling behavior

The background-attachment property determines whether a background image scrolls with the page or remains fixed.

background-attachment.css

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

.section {
  background-attachment: scroll;
}

scroll Background moves with the page.

fixed Background remains fixed relative to the viewport.

local Background scrolls with the element’s content.

Background Gradient

Create modern color transitions

Gradients allow you to create smooth transitions between multiple colors without using an image.

gradient.css

.hero {
  background:
    linear-gradient(
      135deg,
      #071a31,
      #1769d5
    );
}

Linear Gradient

Radial Gradient

Create circular gradient effects

radial-gradient.css

.box {
  background:
    radial-gradient(
      circle,
      #1769d5,
      #071a31
    );
}

Radial Gradient

Multiple Backgrounds

Use more than one background layer

CSS allows multiple background images or gradients to be applied to the same element. Separate each layer with a comma.

multiple-backgrounds.css

.hero {
  background:
    linear-gradient(
      rgba(7, 26, 49, .75),
      rgba(23, 105, 213, .75)
    ),
    url("image.jpg");

  background-size: cover;
  background-position: center;
}

Multiple Background Layers

Gradient + image can be combined to create a professional hero section.

Background Shorthand

Write multiple background properties in one declaration

background-shorthand.css

.hero {
  background:
    #1769d5
    url("image.jpg")
    center / cover
    no-repeat
    fixed;
}

Tip: The shorthand property can make your CSS shorter, but use individual properties while learning to understand exactly what each setting does.

Background Overlay

Improve text readability over images

overlay.css

.hero {
  background:
    linear-gradient(
      rgba(0, 0, 0, .65),
      rgba(0, 0, 0, .65)
    ),
    url("image.jpg");

  background-size: cover;
  background-position: center;
}

EDUCATION

Learn. Practice. Achieve.

A dark overlay makes text easier to read.

Background with CSS Variables

Create reusable design colors

variables.css

:root {
  --primary: #1769d5;
  --dark: #071a31;
  --light: #f3f8ff;
}

.hero {
  background:
    linear-gradient(
      135deg,
      var(--dark),
      var(--primary)
    );
}

.card {
  background-color: var(--light);
}

Practical Hero Section

Professional website background example

hero.css

.hero {
  min-height: 450px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      120deg,
      rgba(7, 26, 49, .92),
      rgba(23, 105, 213, .72)
    ),
    url("classroom.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: white;
}

SHREE NARAYAN COMPUTERS & EDUCATION CENTER

Build Skills for Your Future

Professional education website hero background using CSS gradients and image layers.

CSS Backgrounds Live Preview

Run a complete background example

LIVE PREVIEW

CSS Background Quick Reference

Important properties at a glance

Property	Example	Purpose
background-color	`background-color: blue;`	Sets background color
background-image	`background-image: url(...);`	Adds background image
background-repeat	`no-repeat`	Controls image repetition
background-position	`center`	Controls image position
background-size	`cover`	Controls image size
background-attachment	`fixed`	Controls scrolling behavior
background	`background: #1769d5;`	Shorthand property