CSS background-repeat property
The background-repeat property in CSS controls how a background image is repeated (or not repeated) within an element. This property is particularly useful when you want to define how a pattern or image should tile across the background of an element.
Basic Usage
The basic syntax for the background-repeat property is:
selector {
background-repeat: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
background-image: url('pattern.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
In this example, the div element will have a repeating background pattern.
Values for background-repeat
The background-repeat property offers several values, each determining how the background image should be repeated:
1. repeat
- Description: The background image repeats both horizontally and vertically, filling the entire element.
- Use Case: Ideal for small images or patterns that should tile across the whole background.
div {
background-repeat: repeat;
}
2. repeat-x
- Description: The background image repeats only horizontally (across the x-axis).
- Use Case: Useful when you want a horizontal strip of repeated patterns.
div {
background-repeat: repeat-x;
}
3. repeat-y
- Description: The background image repeats only vertically (along the y-axis).
- Use Case: Useful for creating vertical strips or lines in the background.
div {
background-repeat: repeat-y;
}
4. no-repeat
- Description: The background image is displayed only once and does not repeat.
- Use Case: Ideal when you want a single image or logo to appear as the background without tiling.
div {
background-repeat: no-repeat;
}
5. space
- Description: The background image repeats as often as possible without being clipped. The remaining space is distributed evenly between the images.
- Use Case: Used when you want evenly spaced background images without clipping.
div {
background-repeat: space;
}
6. round
- Description: The background image is repeated, and if it doesn't fit an exact number of times, it is scaled (stretched or compressed) to fit perfectly without any gaps or clipping.
- Use Case: Useful when you want the background to fill the space completely without gaps or partial images.
div {
background-repeat: round;
}
Combining with Other Background Properties
The background-repeat property is often used in combination with other background properties like background-size, background-position, and background-attachment to achieve the desired visual effect.
Example: No Repeat with Centered Background
div {
background-image: url('logo.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
In this example, the background image (logo.png) will be displayed once, centered in the element, and scaled to fit the element without stretching.
Example: Horizontal Repeat with Fixed Background
body {
background-image: url('strip.png');
background-repeat: repeat-x;
background-attachment: fixed;
}
Here, the image strip.png will repeat horizontally across the entire width of the page, and the background will remain fixed when the page is scrolled.
Practical Considerations
- Pattern Design: When using
repeat, ensure the background image is designed to tile seamlessly without noticeable borders. - Performance: Be mindful of file sizes when using images in
repeat, as large images can affect loading times. - Accessibility: Consider the impact of repeated backgrounds on text readability. Ensure there is sufficient contrast between the background and the text.