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

Background Image

CSS allows you to add an image as the background of an HTML element using the background-image property.

You can also control the background image using properties such as background-size, background-position, and background-repeat.

Background Image Flow

HTML Element

→

CSS Background Image

→

Browser

Example 1: CIIT Training Institute Logo

The CIIT Training Institute logo is used as a CSS background image.

CSS Code

div {
    background-image: url("https://ciitinstitute.com/assets/mainlogo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    min-height: 280px;
}

Output

CIIT Training Institute

Here, the CIIT logo is displayed as the background image.

Example 2: Background Size

The background-size property controls how the background image fits inside the element.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 280px;
}

Output

Web Development

Background image using background-size: cover.

cover makes the image cover the complete element.

Example 3: Background Position

The background-position property controls where the background image is placed.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    min-height: 280px;
}

Output

Learning Technology

Background image positioned at right center.

right center places the background image toward the right side and vertically centers it.

Common Background Image Properties

Property	Purpose	Example
`background-image`	Adds an image as the background	`url("image.jpg")`
`background-size`	Controls image size	`cover`
`background-position`	Controls image position	`center`
`background-repeat`	Controls image repetition	`no-repeat`

Simple Explanation

background-image → Adds an image to the background.

background-size → Controls how large the image appears.

background-position → Controls where the image appears.

background-repeat → Controls whether the image repeats.

Summary

Use background-image to add a background image.
Use background-size to control image size.
Use background-position to control image position.
Use background-repeat to control image repetition.

← Previous: Background Color

Next: Background Repeat →