CSS Background Repeat
The background-repeat property controls whether and how a background image tiles across an element.
The default is to tile
Unless you say otherwise, a background image repeats both across and down to cover the entire element. For a small texture that is often what you want, but for a photo or logo it usually is not.
Showing an image once
Set <background-repeat> to <no-repeat> to display the image a single time. This is the common choice for hero images and logos.
No repeat
<!DOCTYPE html>
<html>
<head>
<style>
.hero {
background-image: url('hero.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="hero">
<h1>Welcome</h1>
</div>
</body>
</html>Repeating in one direction
Use <repeat-x> to tile only horizontally or <repeat-y> to tile only vertically. This is handy for a strip of pattern along the top or side of a page.
Horizontal strip
<!DOCTYPE html>
<html>
<head>
<style>
.pattern-top {
background-image: url('stripe.png');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="pattern-top">Page header</div>
</body>
</html>Note: Pair no-repeat with background-position and background-size to place a single image exactly where you want it.
