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 Repeat

The background-repeat property controls whether a background image should repeat inside an HTML element.

By default, a background image may repeat horizontally and vertically. CSS provides different values to control this behavior.

Background Repeat Flow

Background Image

→

background-repeat

→

Browser Output

Example 1: No Repeat

The no-repeat value displays the background image only once.

CSS Code

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

Output

Image appears only once

no-repeat prevents the image from repeating.

Example 2: Repeat

The repeat value repeats the background image horizontally and vertically.

CSS Code

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

Output

Repeated Background

The image is repeated in both horizontal and vertical directions.

Example 3: Repeat-X

The repeat-x value repeats the image only horizontally.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=300&q=80");
    background-repeat: repeat-x;
    background-size: 180px 120px;
    background-position: top left;
    min-height: 260px;
}

Output

Horizontal Repeat

The image repeats from left to right.

Example 4: Repeat-Y

The repeat-y value repeats the image only vertically.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=300&q=80");
    background-repeat: repeat-y;
    background-size: 180px 120px;
    background-position: top left;
    min-height: 300px;
}

Output

Vertical Repeat

The image repeats from top to bottom.

Background Repeat Values

Value	Behavior
`repeat`	Repeats horizontally and vertically
`no-repeat`	Displays the image only once
`repeat-x`	Repeats horizontally
`repeat-y`	Repeats vertically

Simple Explanation

repeat → Repeats the image in both directions.

no-repeat → Shows the image only once.

repeat-x → Repeats the image horizontally.

repeat-y → Repeats the image vertically.

Summary

Use background-repeat to control image repetition.
no-repeat displays the image once.
repeat-x repeats the image horizontally.
repeat-y repeats the image vertically.

← Previous: Background Image

Next: Background Attachment →