H I O X INDIA
CSS Tutorial
 INICIO ||  Scripts  ||  Tutorials  ||  Images  english  Français  中文  Deutsch 

Temas de CSS
Introducción
Tipos de estilo
Propiedades de fondo
Propiedades de texto
Propiedades de fuente
CAJA Propiedades
Frontera Propiedades
Margen de Propiedades
Propiedades Acolchado
Temas Especiales
Pida su Dudas
Reacción



CSS Repetición del Fondo


Tema


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:
<div style="background-image: url('test3.jpg'); background-repeat: repeat; background-color: green;"> nombre de color <br><br><br></div>

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:
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:
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:
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.







Una nota
CSS - Cascading Style Sheets se puede utilizar junto con etiquetas html, como se explica en este sitio. Esta sencilla CSS le ayudará a crear mucho más elegante y aseado páginas html. Esto no necesita ningún software adicional o códigos. Todos navegador web son capaces de entregar los códigos CSS.

Nota 2: Si es necesario se puede utilizar en lugar de
etiquetas. div etiqueta de inicio y final en líneas nuevas. span no podrán exceder de la etiqueta de zona.


privacy policy     license    
© 2004-2005 HIOX INDIA - hioxindia.com