Tecnología

Inicio

Problemas con repeat-y en CSS

La palabra clave de repetición-y de las hojas de estilo en cascada o CSS, le dice a su navegador web para crear tantas copias de una imagen de fondo como sea necesario para llenar la altura de un elemento HTML. Pueden surgir problemas si no se utiliza la sintaxis correcta para repetir-y, u omite los otros ingredientes necesarios para crear la imagen de fondo que se repite. Ayuda a crear una página web sencilla utilizando la repetición-y recordar los elementos esenciales de la repetición verticalmente fondos con CSS.

Sintaxis

Si usted no está viendo una repetición imagen de fondo en posición vertical, puede ser porque usted ha utilizado la sintaxis incorrecta de la palabra clave de repetición-Y, o la definición de estilo que utiliza la palabra clave. Considere esta definición CSS de ejemplo que utiliza la repetición-y. Observe cada carácter en el texto de la declaración. Las llaves indican el inicio y el final de una definición de estilo. Las palabras clave "de fondo" dicen intérprete de CSS de su navegador para realizar una operación de estilo. La parte "url" ha comenzando y terminando llaves y comillas para especificar un archivo de imagen. CSS requiere que todos estos componentes para hacer una repetición de la imagen verticalmente. Si alguno de los componentes falta o está escrito incorrectamente, la imagen no se repetirá.

cuerpo
{
Imagen de fondo: url ( 'archivo FONDO.GIF');
background-repeat: repeat-y;
}

Path incorrecta o nombres de archivo

Cuando usted está teniendo problemas para conseguir una imagen para repetir verticalmente en el fondo de un párrafo, div, cuerpo, u otro elemento HTML, asegúrese de que la imagen que desea repetir existe, y que está en la misma carpeta que la página Web. La siguiente declaración de la muestra CSS define un estilo utilizando una imagen de fondo repitiendo vertical de un elemento div HTML. Observe que la ruta de acceso a la imagen incluye una carpeta hipotética llamada "myimages." Si usted no tiene una carpeta por ejemplo en el servidor, o si el archivo de imagen "archivo FONDO.GIF" no está en esa carpeta, la repetición vertical de la imagen no va a funcionar. Solucionar el problema haciendo que los archivos se hace referencia en los estilos que utilizan la repetición-y existen, y están en las carpetas que las declaraciones repeat-y especifican seguro.

div
{
Imagen de fondo: url ( '.. \ myimages \ archivo FONDO.GIF');
background-repeat: repeat-y;
}

correcta HTML

A pesar de su definición de estilo CSS usando la repetición-y puede estar libre de errores, el código HTML defectuoso que se aplica esta definición incorrecta puede hacer que la imagen de repetición no se presentan. El extracto de la página web que sigue muestra una definición de estilo y una etiqueta de párrafo HTML. Observe que el "myStile" nombre de estilo que la etiqueta p se refiere a con su atributo de clase se diferencia del estilo "myStyle" en el código CSS, por un carácter. Esta diferencia en los nombres significa la etiqueta p no mostrará el fondo de repetición como el programador previsto. Para solucionar este problema, el programador puede corregir el error tipográfico en el atributo de clase de la etiqueta de párrafo.

<Style type = "text / css">
p.myStyle
{
Imagen de fondo: url ( 'archivo FONDO.GIF');
background-repeat: repeat-y;
}
</ Style>
</ Head>
<Body>
<P class = "myStile"> Un texto. </ P>
</ Body>

tamaño

Si usted está tratando de repetir verticalmente una imagen en un elemento cuya altura es menor que dos copias apiladas de la imagen, la repetición de la imagen de repetición-y no va a funcionar. Por ejemplo, si usted está tratando de aplicar un estilo de repetición-y a un relativamente pequeño elemento de la página como un párrafo, lo más probable es que usted no verá ninguna imagen en absoluto. La razón es que la altura de un párrafo es casi siempre menor que la altura de una imagen, a menos que su imagen es muy pequeña. Puede borrar este obstáculo mediante el uso de la palabra clave CSS Altura para especificar una mayor altura para el elemento. En el siguiente fragmento, un estilo CSS para un elemento de párrafo establece la altura de ese elemento a una dimensión relativamente grande. La altura puede permitir que el efecto de repetición-y para trabajar.

P.myStyle
{
altura: 300px;
Imagen de fondo: url ( 'archivo FONDO.GIF');
background-repeat: repeat-y;
}


Artículos relacionados