CSS Background Repeat

It is use to control the repetition of background image on the screen.

If we do not use background repeat property then background repeat: repeat is default.

1) Background repeat (no repeat)

It is use to prevent the repeat of image vertically and horizontally both.
Only one image will be displayed.

Syntax -

background-repeat: no-repeat;

For example -

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teknowize</title>

  <style>
    .BgImageCls{
     width: 100%;
     height: 100vh;
     background-image: url('teknowize.png');
     background-repeat: no-repeat;
    }
  </style>

</head>

<body>

  <div class="BgImageCls">
    <h1>CSS Background Image</h1>
    <p>Welcome to Teknowize</p>
  </div>

</body> 

</html>

Output

CSS

2) Background repeat (repeat)

It is use to repeat of image vertically and horizontally both.
It is by default.
Some images should be repeat only vertically or horizontally.

Syntax -

background-repeat: repeat;

For example -

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teknowize</title>

  <style>
    .BgImageCls{
     width: 100%;
     height: 100vh;
     background-image: url('teknowize.png');
     background-repeat: repeat;
    }
  </style>

</head>

<body>

  <div class="BgImageCls">
    <h1>CSS Background Image</h1>
    <p>Welcome to Teknowize</p>
  </div>

</body> 

</html>

Output

CSS

3) Background repeat (horizontally)

It is use to prevent the repeat of image vertically but repeat image horizontally.

Syntax -

background-repeat: repeat-x;

For example -

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teknowize</title>

  <style>
    .BgImageCls{
     width: 100%;
     height: 100vh;
     background-image: url('teknowize.png');
     background-repeat: repeat-x;
    }
  </style>

</head>

<body>

  <div class="BgImageCls">
    <h1>CSS Background Image</h1>
    <p>Welcome to Teknowize</p>
  </div>

</body> 

</html>

Output

CSS

4) Background repeat (vertically)

It is use to prevent the repeat of image horizontally but repeat image vertically .

Syntax -

background-repeat: repeat-y;

For example -

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teknowize</title>

  <style>
    .BgImageCls{
     width: 100%;
     height: 100vh;
     background-image: url('teknowize.png');
     background-repeat: repeat-y;
    }
  </style>

</head>

<body>

  <div class="BgImageCls">
    <h1>CSS Background Image</h1>
    <p>Welcome to Teknowize</p>
  </div>

</body> 

</html>

Output

CSS

5) Background repeat (space)

In this the background-image is repeated horizontally & vertically as much as possible without clipping and white space is distributed between each images evenly.

Syntax -

background-repeat: space;

For example -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teknowize</title>

  <style>
    .BgImageCls{
     width: 100%;
     height: 100vh;
     background-image: url('teknowize.png');
     background-repeat: space;
    }
  </style>

</head>

<body>

  <div class="BgImageCls">
    <h1>CSS Background Image</h1>
    <p>Welcome to Teknowize</p>
  </div>

</body> 

</html>

Output

CSS

6) Background repeat (round)

It is use to repeat image vertically and horizontally without white space between them by stretched the images to fill the space (no gap) .

Syntax -

background-repeat: round;

For example -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teknowize</title>

  <style>
    .BgImageCls{
     width: 100%;
     height: 100vh;
     background-image: url('teknowize.png');
     background-repeat: round;
    }
  </style>

</head>

<body>

  <div class="BgImageCls">
    <h1>CSS Background Image</h1>
    <p>Welcome to Teknowize</p>
  </div>

</body> 

</html>

Output

CSS

CSS

Introduction to Cascading Style Sheets

CSS Selectors

CSS color property

CSS Background Color

CSS Background Image

CSS Background Repeat

CSS Background Gradients

CSS Background Size

CSS Background Blend Mode

CSS Background Clip

CSS Background Attachment

CSS Background Position

CSS Background Origin

CSS Font Family

CSS Font Size

CSS Font Style

CSS Font Weight

CSS Font Variant

CSS Text Color

CSS Text Alignment

CSS Text Align Last

CSS Text Direction

CSS Vertical Align

CSS Text Decoration

CSS Text Decoration Line

CSS Text Decoration Color

CSS Text Decoration Style

CSS Text Decoration Thickness

CSS Text Transform

CSS White Space

CSS Overflow

CSS Overflow X

CSS Overflow Y

CSS Text Overflow

CSS Text Shadow

CSS Text Spacing

CSS Letter Spacing

CSS Word Spacing

CSS Line Height

CSS Text Indent

CSS Links

CSS Border

CSS Border Color

CSS Border Style

CSS Border Width

CSS Background Repeat

1) Background repeat (no repeat)

2) Background repeat (repeat)