En este artículo, vamos a discutir la propiedad de repetición de la imagen de fondo de CSS. Además, vamos a discutir cómo repetir la imagen de fondo en direcciones horizontales y verticales.
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.
Background-repeat: 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:
background-repeat: repeat|repeat-x|repeat-y| no-repeat|initial|inherit;
Ejemplo 1: Repitamos la imagen horizontalmente. Aquí vamos a usar la misma propiedad que usamos anteriormente.
La propiedad repeat-x se usa para repetir la imagen de fondo horizontalmente.
Sintaxis:
element {
background-repeat: repeat-x;
}
También tenemos el tamaño de la imagen de fondo usando la propiedad background-size .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body{
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png");
background-size: 150px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
Salida: como puede ver en la salida, la imagen se repite horizontalmente ahora.
Ejemplo 2: Ahora repitamos la imagen verticalmente. La propiedad repeat-y se usa para establecer que la imagen de fondo se repita solo verticalmente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body{
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png");
background-size: 150px;
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
Salida: Ahora la imagen se repite verticalmente.
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA