Background image repeat
In this article we are going to learn about background image repeat property with values repeat, repeat-x, repeat-y, and no repeat in css, how to control the background image.
We learnt about css in general, links style in css, box shadow in css, text align in css, table style in css, text shadow in css, letter spacing in css, word spacing in css, text transform in css, text decoration in css and background image in css so, we will be focusing on background image repeat property.
Background image repeat
Background image repeat is a Cascading Style Sheet property used to control the background image with values repeat, repeat-x, repeat-y, no-repeat, fixed and scroll.
repeat
It is a value of background image repeat used to repeat the image background to take up both full box width and height (horizontally and vertically). By default the image will always be repeated without this property value.
Let us create a div element with repeat value of background image repeat property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.background-image-repeat-example {
background-image: url(image/coverphoto.png);
background-size: contain;
background-repeat: repeat;
}
<style/>
</head>
<body>
<div class="background-image-repeat-example">This is a div element with repeat value of background image repeat added.</div>
</body>
</html>
So, we should have the following results.
repeat-x
It is a value of background image repeat used to repeat the image background to take up only full box width (horizontally).
Let us create a div element with repeat-x value of background image repeat property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.background-image-repeat-example {
background-image: url(image/coverphoto.png);
background-size: contain;
background-repeat: repeat-x;
}
<style/>
</head>
<body>
<div class="background-image-repeat-example">This is a div element with repeat-x value of background image repeat added.</div>
</body>
</html>
So, we should have the following results.
repeat-y
It is a value of background image repeat used to repeat the image background to take up only full box height (vertically).
Let us create a div element with repeat-y value of background image repeat property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.background-image-repeat-example {
background-image: url(image/coverphoto.png);
background-size: contain;
background-repeat: repeat-y;
}
<style/>
</head>
<body>
<div class="background-image-repeat-example">This is a div element with repeat-y value of background image repeat added.</div>
</body>
</html>
So, we should have the following results.
no repeat
It is a value of background image repeat used to prevent the image background to be repeated and there will be only one image.
Let us create a div element with no-repeat value of background image repeat property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.background-image-repeat-example {
background-image: url(image/coverphoto.png);
background-size: contain;
background-repeat: no-repeat;
}
<style/>
</head>
<body>
<div class="background-image-repeat-example">This is a div element with no-repeat value of background image repeat added.</div>
</body>
</html>
So, we should have the following results.