The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.
Syntax
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial| inherit;
Property Values
repeat: This property is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.
- Syntax:
element { background-repeat: repeat; }
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-repeat property</
title
>
<
style
>
body {
background-image: url(
background-repeat: repeat;
background-size: 200px 150px;
text-align:center;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>background-repeat: repeat;</
h2
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
repeat-x: This property is used to repeat the background image horizontally.
- Syntax:
element { background-repeat: repeat-x; }
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-repeat property</
title
>
<
style
>
body {
background-image: url(
background-repeat: repeat-x;
background-size: 200px 150px;
text-align:center;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>background-repeat: repeat-x;</
h2
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
repeat-y: This property is used to set the background image repeated only vertically.
- Syntax:
element { background-repeat: repeat-y; }
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-repeat property</
title
>
<
style
>
body {
background-image: url(
background-repeat: repeat-y;
background-size: 200px 150px;
text-align:center;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>background-repeat: repeat-y;</
h2
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
no-repeat: This property does not repeat background image. It displays the background image only once.
- Syntax:
element { background-image: no-repeat; }
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-repeat property</
title
>
<
style
>
body {
background-image: url(
background-repeat: no-repeat;
background-size: 400px 250px;
text-align:center;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>background-repeat: no-repeat;</
h2
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Supported Browsers: The browsers supported by background-repeat property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0