Class 023 — Colors & Backgrounds

Colors and backgrounds are essential parts of web design. They help create visual hierarchy, improve readability, establish branding and make websites more attractive.

In this class, you will learn how to control text colors and backgrounds using CSS.

You will learn:

CSS color property
Color names
HEX colors
RGB colors
RGBA colors
HSL colors
HSLA colors
Background colors
Background images
Background repeat
Background position
Background size
Background attachment
Background shorthand
Gradients
Transparency
Practical website design examples

LEARNING OBJECTIVES

After completing this class, you will be able to:

Change text colors using CSS.
Change element background colors.
Understand different CSS color formats.
Use HEX, RGB, RGBA and HSL colors.
Add background images.
Control background image repetition.
Control background image position.
Resize background images.
Use cover and contain.
Create linear gradients.
Create radial gradients.
Combine colors and images.
Create professional hero sections using backgrounds.

WHAT IS CSS COLOR?

CSS provides the color property to change the foreground color of an element, commonly its text color.

Syntax:

selector {
color: value;
}

Example:

h1 {
color: blue;
}

HTML:

Welcome to My Website

The heading text will appear blue.

CSS COLOR NAMES

CSS supports named colors.

Example:

h1 {
color: red;
}

p {
color: blue;
}

h2 {
color: green;
}

Other examples include:

black
white
gray
yellow
orange
purple
pink
brown
navy
teal
aqua
lime
maroon
silver

EXAMPLE

HTML:

Main Heading

This is a paragraph.

CSS:

h1 {
color: darkblue;
}

p {
color: gray;
}

HEX COLORS

HEX is a commonly used way to represent colors in CSS.

HEX values normally begin with:

Example:

h1 {
color: #ff0000;
}

This represents red.

Another example:

p {
color: #0000ff;
}

This represents blue.

COMMON HEX COLORS

Black:

#000000

White:

#ffffff

Red:

#ff0000

Green:

#008000

Blue:

#0000ff

Yellow:

#ffff00

Gray:

#808080

HEX COLOR STRUCTURE

A common six-digit HEX color follows this pattern:

#RRGGBB

RR = Red
GG = Green
BB = Blue

Example:

#ff0000

means:

Red = ff
Green = 00
Blue = 00

HEX SHORTHAND

Some HEX colors can use three digits.

Example:

#fff

is shorthand for:

#ffffff

Another example:

#000

means:

#000000

RGB COLORS

RGB stands for:

Red, Green, Blue

Syntax:

rgb(red, green, blue)

Example:

h1 {
color: rgb(255, 0, 0);
}

This produces red.

Each channel in this common RGB form ranges from:

0 to 255

RGB EXAMPLES

Red:

rgb(255, 0, 0)

Green:

rgb(0, 128, 0)

Blue:

rgb(0, 0, 255)

Black:

rgb(0, 0, 0)

White:

rgb(255, 255, 255)

RGBA COLORS

RGBA adds an alpha component for transparency.

RGBA stands for:

Red, Green, Blue, Alpha

Example:

.box {
background-color: rgba(0, 0, 0, 0.5);
}

The alpha value controls transparency.

In the traditional decimal form:

0 = Fully transparent
1 = Fully opaque

Example:

rgba(255, 0, 0, 0.5)

creates a semi-transparent red.

HSL COLORS

HSL stands for:

Hue, Saturation, Lightness

Example:

h1 {
color: hsl(240, 100%, 50%);
}

This produces blue.

HSL consists of:

Hue = Position around the color wheel

Saturation = Intensity of the color

Lightness = How light or dark the color appears

HSL EXAMPLES

Red:

hsl(0, 100%, 50%)

Green:

hsl(120, 100%, 25%)

Blue:

hsl(240, 100%, 50%)

HSLA COLORS

HSLA includes an alpha value.

Example:

.box {
background-color: hsla(240, 100%, 50%, 0.5);
}

This creates a semi-transparent blue background.

BACKGROUND COLOR

The background-color property changes an element’s background color.

Example:

body {
background-color: lightgray;
}

Another example:

.card {
background-color: white;
}

PRACTICAL EXAMPLE

HTML:

<h2>Web Development</h2>

<p>
    Learn professional web development.
</p>

CSS:

.card {
background-color: #f5f5f5;
}

.card h2 {
color: #1a237e;
}

.card p {
color: #444444;
}

BACKGROUND IMAGE

CSS can display an image as an element’s background.

Syntax:

Example:

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

HTML:

<h1>
    Professional Web Development
</h1>

CSS:

.hero {
background-image: url(“hero.jpg”);
height: 500px;
}

BACKGROUND IMAGE PATH

Suppose your project structure is:

project/
│
├── index.html
├── css/
│ └── style.css
└── images/
└── hero.jpg

Because the image path is resolved relative to the CSS file, style.css can use:

BACKGROUND REPEAT

By default, a background image may repeat when it is smaller than the element.

Use:

background-repeat: no-repeat;

Example:

.hero {
background-image: url(“hero.jpg”);
background-repeat: no-repeat;
}

OTHER BACKGROUND REPEAT VALUES

repeat

repeat-x

repeat-y

no-repeat

Example:

.pattern {
background-image: url(“pattern.png”);
background-repeat: repeat;
}

BACKGROUND POSITION

The background-position property controls the position of a background image.

Example:

.hero {
background-image: url(“hero.jpg”);
background-position: center;
}

Common values include:

center
top
bottom
left
right

Combinations:

center center
center top
center bottom
left center
right center

Example:

.hero {
background-position: center center;
}

BACKGROUND SIZE

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

Example:

.hero {
background-size: cover;
}

COMMON VALUES

cover

contain

auto

Specific values such as:

100% 100%

BACKGROUND-SIZE: COVER

Example:

.hero {
background-size: cover;
}

cover scales the image so that the background area is covered.

Some parts of the image may be cropped depending on the element’s proportions.

BACKGROUND-SIZE: CONTAIN

Example:

.hero {
background-size: contain;
}

contain scales the image so the complete image fits inside the background area.

This may leave unused background space.

COVER VS CONTAIN

cover:

Covers the entire background area.
May crop part of the image.
Commonly used for hero backgrounds.

contain:

Keeps the complete image visible.
May leave empty space.
Useful when the full image needs to remain visible.

BACKGROUND ATTACHMENT

The background-attachment property controls whether a background scrolls with the page or behaves differently relative to scrolling.

Example:

.hero {
background-image: url(“hero.jpg”);
background-attachment: fixed;
}

Common values include:

scroll
fixed
local

BACKGROUND SHORTHAND

Multiple background properties can be combined using the background shorthand property.

Example:

.hero {
background:
url(“hero.jpg”)
center / cover
no-repeat;
}

This combines several background settings into one declaration.

MULTIPLE BACKGROUNDS

CSS can support multiple background layers.

Example:

.hero {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url(“hero.jpg”);
}

The first background is placed above the second one.

This technique is useful for adding a dark overlay over an image.

WHY USE AN OVERLAY?

Text can become difficult to read when placed directly over a bright or detailed image.

A dark transparent layer can improve readability.

Example:

.hero {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url(“hero.jpg”);

background-size: cover;
background-position: center;
color: white;

}

CSS GRADIENTS

CSS can create gradients without requiring a separate image file.

Two common gradient types are:

Linear Gradient
Radial Gradient

LINEAR GRADIENT

A linear gradient creates a gradual transition between colors along a line.

Example:

.hero {
background:
linear-gradient(
blue,
purple
);
}

GRADIENT DIRECTION

Example:

.hero {
background:
linear-gradient(
to right,
blue,
purple
);
}

Other directions include:

to left
to right
to top
to bottom
to top right
to bottom right

MULTIPLE GRADIENT COLORS

Example:

.banner {
background:
linear-gradient(
to right,
#0f172a,
#2563eb,
#7c3aed
);
}

RADIAL GRADIENT

A radial gradient spreads outward from a central point.

Example:

.box {
background:
radial-gradient(
white,
blue
);
}

GRADIENT WITH TRANSPARENCY

Example:

.overlay {
background:
linear-gradient(
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.2)
);
}

PRACTICAL HERO SECTION

HTML:

<div class="hero-content">

    <h1>
        Build Your Professional Website
    </h1>

    <p>
        Modern web development solutions for your business.
    </p>

    <a href="#">
        Get Started
    </a>

</div>

CSS:

.hero {
min-height: 500px;

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

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

color: white;

}

.hero-content {
padding: 100px 40px;
}

.hero h1 {
color: white;
}

.hero p {
color: #eeeeee;
}

EXPECTED RESULT

The hero section will display:

A background image.
A dark transparent overlay.
White heading text.
Light paragraph text.
Improved readability over the image.

BACKGROUND ON CARDS

Example:

.card {
background-color: #ffffff;
}

.featured-card {
background:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);

color: white;

}

BACKGROUND ON BUTTONS

Example:

.button {
background-color: blue;
color: white;
}

Gradient button:

.button {
background:
linear-gradient(
to right,
#2563eb,
#7c3aed
);

color: white;

}

TRANSPARENT COLOR

CSS supports:

transparent

Example:

button {
background-color: transparent;
}

CURRENTCOLOR

CSS also supports the keyword:

currentColor

It uses the current value of the element’s color property.

Example:

.button {
color: blue;
border: 2px solid currentColor;
}

OPACITY

The opacity property controls the transparency of an entire element.

Example:

.box {
opacity: 0.5;
}

Important:

opacity affects the entire element, including its content and children as rendered.

RGBA VS OPACITY

Example:

.card {
background-color: rgba(0, 0, 0, 0.5);
}

This makes the background color transparent without applying opacity to all of the card’s content.

But:

.card {
opacity: 0.5;
}

affects the rendering of the whole card, including its text and child content.

CHOOSING WEBSITE COLORS

A professional website should use colors consistently.

A basic palette may contain:

Primary Color
Secondary Color
Background Color
Surface Color
Text Color
Muted Text Color
Accent Color
Success Color
Warning Color
Error Color

EXAMPLE COLOR PALETTE

Primary:

#2563eb

Secondary:

#7c3aed

Background:

#f8fafc

Surface:

#ffffff

Main Text:

#0f172a

Muted Text:

#64748b

Success:

#16a34a

Warning:

#f59e0b

Error:

#dc2626

USING CSS VARIABLES FOR COLORS

You will learn CSS custom properties in greater detail later, but a professional project may define reusable colors like this:

:root {
–primary-color: #2563eb;
–background-color: #f8fafc;
–text-color: #0f172a;
}

Then:

body {
background-color: var(–background-color);
color: var(–text-color);
}

button {
background-color: var(–primary-color);
}

COLOR CONTRAST

Good color contrast is important for readability and accessibility.

For example, light gray text on a white background may be difficult to read.

Poor example:

p {
color: #eeeeee;
background-color: #ffffff;
}

A stronger contrast is easier to read:

p {
color: #333333;
background-color: #ffffff;
}

Always test important text/background combinations for adequate contrast.

COMMON MISTAKES

FORGETTING #

Wrong:

color: ff0000;

Correct:

color: #ff0000;

INVALID RGB VALUES

Understand the accepted syntax and valid ranges for the RGB format you are using.

WRONG IMAGE PATH

Wrong paths cause background images not to appear.

Check the location of the CSS file relative to the image.

FORGETTING URL()

Wrong:

Correct:

FORGETTING NO-REPEAT

A small background image may repeat unexpectedly.

Use:

background-repeat: no-repeat;

when repetition is not wanted.

USING COVER WITHOUT UNDERSTANDING CROPPING

background-size: cover;

may crop parts of the image.

USING CONTAIN AND EXPECTING FULL COVERAGE

contain keeps the full image visible but may leave unused space.

POOR TEXT CONTRAST

Do not use combinations that make text difficult to read.

USING OPACITY WHEN ONLY THE BACKGROUND SHOULD BE TRANSPARENT

Instead of:

opacity: 0.5;

consider an alpha color such as:

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

when only the background needs transparency.

TOO MANY COLORS

Using many unrelated colors can make a website visually inconsistent.

Create a controlled color palette.

BACKGROUND IMAGE WITHOUT FALLBACK COLOR

A useful pattern can include a background color as a fallback.

Example:

.hero {
background-color: #0f172a;
background-image: url(“hero.jpg”);
}

TEXT DIRECTLY OVER A BUSY IMAGE

Use an overlay or choose an image area that provides enough contrast.

NEW & DIFFICULT WORDS

Color = The visual color applied to content such as text.

Background = The area behind an element’s content.

HEX = Hexadecimal color notation.

RGB = Red, Green, Blue.

RGBA = Red, Green, Blue, Alpha.

HSL = Hue, Saturation, Lightness.

HSLA = Hue, Saturation, Lightness, Alpha.

Alpha = A component used to represent transparency.

Hue = A position on the color wheel.

Saturation = The intensity or purity of a color.

Lightness = How light or dark a color appears.

Gradient = A gradual transition between colors.

Linear Gradient = A gradient that transitions along a line.

Radial Gradient = A gradient that spreads outward from a central point.

Opacity = The transparency level applied to an element as a whole.

Overlay = A layer placed over another visual element.

Contrast = The visual difference between foreground and background colors.

Palette = A selected collection of colors used in a design.

Shorthand = A CSS property syntax that combines multiple related settings.

Foreground = The visible content color, such as text color.

Fallback = An alternative value used when another resource is unavailable or unsuitable.

IMPORTANT NOTES

Text color:

color: blue;

Background color:

background-color: white;

HEX:

color: #2563eb;

RGB:

color: rgb(37, 99, 235);

RGBA:

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

HSL:

color:
hsl(217, 91%, 60%);

Background image:

No repeat:

background-repeat:
no-repeat;

Background position:

background-position:
center;

Background size:

background-size:
cover;

Linear gradient:

background:
linear-gradient(
to right,
blue,
purple
);

Image with overlay:

background-image:
linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url(“hero.jpg”);

PRACTICE

Change the body background color.
Create three headings with different text colors.
Create colors using HEX.
Create colors using RGB.
Create a semi-transparent background using RGBA.
Experiment with HSL.
Add a background image.
Disable background repetition.
Set the background position to center.
Test:

background-size: cover;

Test:

background-size: contain;

Create a linear gradient.
Create a radial gradient.
Add a dark overlay to a background image.
Create a professional color palette.

ASSIGNMENT

Create a webpage called:

CSS Colors & Backgrounds Practice

The page must contain:

Header
Hero section
About section
Services section
Three cards
Call-to-action section
Footer

Requirements:

Use at least three HEX colors.
Use at least one RGB color.
Use at least one alpha-transparent color.
Use one HSL color.
Use background-color.
Use a background image.
Use background-repeat.
Use background-position.
Use background-size.
Use one linear gradient.
Use one radial gradient.
Create one image overlay.
Maintain readable text contrast.

MINI PROJECT

Create a hero section for an IT company.

HTML:

<div class="hero-content">

    <h1>
        Grow Your Business with Technology
    </h1>

    <p>
        Professional web development and digital solutions.
    </p>

    <a href="#" class="button">
        Contact Us
    </a>

</div>

CSS:

.hero {
min-height: 600px;

background-color: #0f172a;

background-image:
    linear-gradient(
        rgba(15, 23, 42, 0.75),
        rgba(15, 23, 42, 0.75)
    ),
    url("images/office.jpg");

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

color: white;

}

.hero-content {
padding: 150px 40px;
}

.hero h1 {
color: #ffffff;
}

.hero p {
color: #e2e8f0;
}

.button {
background-color: #2563eb;
color: #ffffff;
}

QUIZ

Which CSS property changes text color?

Answer:

color

Which property changes background color?

Answer:

background-color

What does HEX commonly begin with?

Answer:

What does RGB stand for?

Answer:

Red, Green, Blue.

What does RGBA add to RGB?

Answer:

An alpha component for transparency.

What does HSL stand for?

Answer:

Hue, Saturation, Lightness.

Which property adds a background image?

Answer:

background-image

How do you prevent a background image from repeating?

Answer:

background-repeat: no-repeat;

Which value commonly makes an image cover the entire background area?

Answer:

background-size: cover;

What is the difference between cover and contain?

Answer:

cover fills the background area and may crop the image.

contain keeps the complete image visible but may leave unused space.

What is a CSS gradient?

Answer:

A gradual transition between two or more colors.

What is the difference between RGBA transparency and opacity?

Answer:

An alpha color can make a particular color transparent, while opacity affects the rendering of the entire element.

INTERVIEW QUESTIONS

Q: How can you specify colors in CSS?

Answer:

CSS supports several color formats, including named colors, HEX, RGB and HSL, as well as formats with alpha transparency.

Q: What is the difference between RGB and RGBA?

Answer:

RGB defines red, green and blue color components. RGBA additionally includes an alpha component for transparency.

Q: What is HSL?

Answer:

HSL stands for Hue, Saturation and Lightness and provides another way to describe colors.

Q: What does background-size: cover do?

Answer:

It scales the background image to cover the entire background positioning area. Some image content may be cropped.

Q: What does background-size: contain do?

Answer:

It scales the image so that it fits within the background positioning area while preserving the complete image, which can leave unused space.

Q: What is a linear gradient?

Answer:

A linear gradient creates a gradual transition between colors along a line.

Q: Why are overlays used with background images?

Answer:

Overlays can improve text readability and create a more controlled visual appearance.

Q: What is color contrast?

Answer:

Color contrast is the visual difference between foreground and background colors. Adequate contrast helps make content readable and accessible.

Q: What is the difference between color and background-color?

Answer:

color generally controls the foreground text color, while background-color controls the background color of an element.

CLASS SUMMARY

In Class 23, you learned CSS Colors & Backgrounds.

You learned:

CSS text colors
Named colors
HEX colors
RGB colors
RGBA colors
HSL colors
HSLA colors
Background colors
Background images
Background repeat
Background position
Background size
cover
contain
Background attachment
Background shorthand
Multiple backgrounds
Linear gradients
Radial gradients
Transparency
Opacity
Image overlays
Color palettes
Color contrast

Important examples:

Text color:

color: #2563eb;

Background:

background-color: #ffffff;

Background image:

Professional image background:

background-image:
linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url(“hero.jpg”);

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

Colors and backgrounds are fundamental parts of CSS design. Use them consistently and always keep readability, accessibility and visual hierarchy in mind.

NEXT CLASS:

Class 024 — Fonts & Text Styling

Colors & Backgrounds — Web Development Class 23

Welcome to My Website

Main Heading

Leave a Reply Cancel reply