Colors & Backgrounds

Learn how CSS is used to change text colors, background colors, and background images.

What are Colors & Backgrounds?

CSS provides properties that allow us to control the appearance of elements on a web page.

We can change text colors, background colors, and even place images behind content using CSS.

How CSS Colors & Backgrounds Work

HTML Element

h1, p, div, section

→

CSS Styling

color
background-color
background-image

→

Styled Web Page

Colors and images appear in browser

Example 1: Text Color

The color property changes the color of text.

h1 {
    color: blue;
}

Output

Browser Output

WELCOME TO CIIT TRAINING INSTITUTE ❤

Example 2: Background Color

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

div {
    background-color: lightblue;
    padding: 20px;
}

Output

Browser Output

This is a div with a light blue background.

CSS Color Values

CSS supports different ways of specifying colors.

Color Format	Example	Description
Color Name	`red`	Uses a predefined CSS color name.
HEX	`#ff0000`	Six-digit hexadecimal color value.
RGB	`rgb(255, 0, 0)`	Defines red, green and blue values.
RGBA	`rgba(255, 0, 0, 0.5)`	RGB color with transparency.

Example 3: Background Image

The background-image property places an image behind the content of an element.

In this example, the image is loaded directly from an online image URL.

div {
    background-image: url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=80");

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

    min-height: 280px;
}

Output

Browser Output

CSS Background Image

The image is displayed behind this content.

background-image

Specifies the image that should appear as the background.

background-size

cover makes the image cover the complete element.

background-position

center keeps the image centered inside the element.

Beginner Tip:

The background-image property does not place an image as normal content. Instead, it displays the image behind the content of the element.

Summary

CSS colors and backgrounds allow you to control the visual appearance of HTML elements. You can change text colors, apply background colors, add background images, control image size and position, and create visually attractive web pages.