La propiedad background-repeat en CSS se usa para repetir la imagen de fondo tanto horizontal como verticalmente. También decide si la imagen de fondo se repetirá o no.
Sintaxis
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial| inherit;
Valor por defecto: Su valor por defecto es inicial.
Valores de propiedad
repetir: esta propiedad se utiliza para repetir la imagen de fondo tanto horizontal como verticalmente. La última imagen se recortará si no cabe en la ventana del navegador.
- Sintaxis:
element {
background-repeat: repeat;
}
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-repeat: repeat;
background-size: 200px 150px;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>background-repeat: repeat;</h2>
</body>
</html>
- Producción:
repetir-x: esta propiedad se utiliza para repetir la imagen de fondo horizontalmente.
- Sintaxis:
element {
background-repeat: repeat-x;
}
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
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>
- Producción:
repeat-y: esta propiedad se usa para establecer que la imagen de fondo se repita solo verticalmente.
- Sintaxis:
element {
background-repeat: repeat-y;
}
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
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>
- Producción:
no-repeat: esta propiedad no repite la imagen de fondo. Muestra la imagen de fondo solo una vez.
- Sintaxis:
element {
background-image: no-repeat;
}
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
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>
- Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad background-repeat se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Apple Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA