En este artículo veremos cómo se controla en CSS una repetición de imagen de la copia de seguridad. Esta tarea se puede lograr usando la propiedad background-repeat que nos ayudará a controlar la repetición de la imagen.
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;
Ejemplo 1: En el ejemplo, haremos uso de repetir-x para repetir la imagen en la dirección horizontal.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
margin-top: 40px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-repeat: repeat-x;
background-size: 150px 100px;
}
h1 {
text-align: center
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: En el ejemplo, haremos uso de la repetición-y para repetir la imagen en la dirección vertical.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
margin-top: 40px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-repeat: repeat-y;
background-size: 150px 100px;
}
h1 {
margin-top: 210px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA