CSS Repetición del Fondo
Cómo establecer una imagen de fondo sin repetir en html?
Quiero una imagen de fondo que se repita verticalmente solo?
Quiero una imagen de fondo que se repita horizontalmente solo?
Explicación
Esta etiqueta establece la propiedad de como debería verse la imagen de fondo.
Dependiendo de esta etiqueta la imagen puede repetirse horizontal o verticalmente, o en ambas.
Toma cualquiera de los siguientes valores:
a)repeat : Este valor le dice a la imagen que se repita en ambas direcciones
b)repeat-x : Este valor le dice a la imagen de fondo que se repita en dirección vertical únicamente
c)repeat-y : Este valor le dice a la imagen que se repita en dirección horizontal
d)no-repeat : Este valor le indica a la imagen de fondo que no se repita.
Ejemplo 1:
Ejemplo 2:
Ejemplo 3:
Ejemplo 4:
Ahora puede ver que la imagen
se ha establecido como fondo para la etiqueta div.
Dependiendo de la repetición de etiqueta de la imagen se repite en el interior del propio espacio.
Dependiendo de esta etiqueta la imagen puede repetirse horizontal o verticalmente, o en ambas.
Toma cualquiera de los siguientes valores:
a)repeat : Este valor le dice a la imagen que se repita en ambas direcciones
b)repeat-x : Este valor le dice a la imagen de fondo que se repita en dirección vertical únicamente
c)repeat-y : Este valor le dice a la imagen que se repita en dirección horizontal
d)no-repeat : Este valor le indica a la imagen de fondo que no se repita.
Ejemplo 1:
<div style="background-image: url('test3.jpg'); background-repeat: repeat; background-color: green;"> nombre de color
<br><br><br></div>
Resultado:
Resultado:
nombre de color
Ejemplo 2:
<div style="background-image: url('test3.jpg'); background-repeat: repeat-x; background-color: green;"> nombre de color
<br><br><br></div>
Resultado:
Resultado:
nombre de color
Ejemplo 3:
<div style="background-image: url('test3.jpg'); background-repeat: repeat-y; background-color: green;"> nombre de color
<br><br><br></div>
Resultado:
Resultado:
nombre de color
Ejemplo 4:
<div style="background-image: url('test3.jpg'); background-repeat: no-repeat; background-color: green;"> nombre de color
<br><br><br></div>
Resultado:
Resultado:
nombre de color
Ahora puede ver que la imagen
se ha establecido como fondo para la etiqueta div.Dependiendo de la repetición de etiqueta de la imagen se repite en el interior del propio espacio.