Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Show the background image only once with CSS
Use the background-repeat property to display the background image only once. By default, background images repeat to fill the entire element, but you can control this behavior with the background-repeat property.
Syntax
selector {
background-repeat: value;
}
Possible Values
| Value | Description |
|---|---|
no-repeat |
Background image displays only once |
repeat |
Background image repeats both horizontally and vertically (default) |
repeat-x |
Background image repeats only horizontally |
repeat-y |
Background image repeats only vertically |
Example
The following code shows how to display a background image only once using background-repeat: no-repeat −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
margin: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="content">
<h1>Background Image</h1>
<p>This background image appears only once.</p>
</div>
</body>
</html>
A page with a single background image that does not repeat, positioned at the center. The content appears in a semi-transparent white box with rounded corners.
Conclusion
The background-repeat: no-repeat property ensures that your background image displays only once, preventing the default tiling behavior. Combine it with background-position for better control over image placement.
Updated on: 2026-03-15T12:11:22+05:30
862 Views
Advertisements