COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

Multiple Backgrounds

CSS allows you to apply more than one background image to the same HTML element.

Multiple background images are separated using commas in the background-image property.

Multiple Backgrounds Flow

Image 1

Image 2

→

Single HTML Element

Example 1: Two Background Images

Two background images can be applied to the same element by separating the URLs with a comma.

CSS Code

div {
    background-image:
        url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80"),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80");

    background-size:
        55% 100%,
        55% 100%;

    background-position:
        left center,
        right center;

    background-repeat:
        no-repeat,
        no-repeat;

    min-height: 300px;
}

Output

Multiple Background Images

Two images are applied to one element.

Example 2: Background Image with CIIT Logo

Multiple backgrounds can also combine a real image with the CIIT Training Institute logo.

CSS Code

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

    background-size:
        220px auto,
        cover;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat,
        no-repeat;

    min-height: 300px;
}

Output

CIIT Training Institute

Logo and background image used together.

Example 3: Gradient with Background Image

A gradient can also be combined with a background image. The first background is displayed above the second one.

CSS Code

div {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80");

    background-size:
        cover,
        cover;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat,
        no-repeat;

    min-height: 300px;
}

Output

Learning Technology

A gradient is layered over the background image.

Background Layer Order

First Background
Displayed on top

↓

Second Background
Displayed behind

When multiple backgrounds are used, the first background image is placed on top of the following background images.

Basic Syntax

element {
    background-image:
        url("image1.jpg"),
        url("image2.jpg");
}

Separate multiple background images using commas.

Common Properties with Multiple Backgrounds

Property	Purpose
`background-image`	Defines multiple background images.
`background-size`	Defines the size of each background.
`background-position`	Defines the position of each background.
`background-repeat`	Defines whether each background repeats.

Simple Explanation

One image → One background image.

Multiple images → Separate the images using commas.

First image → Appears on top.

Following images → Appear behind the previous layers.

Summary

CSS supports multiple background images.
Separate background images using commas.
The first background is displayed on top.
Background properties can be defined for each layer.

← Previous: Background Attachment

Next: Text & Fonts →