fondo css repetición de 300px en adelante

StackOverflow https://stackoverflow.com/questions/1845714

  •  12-09-2019
  •  | 
  •  

Pregunta

Me pregunto si alguien sabe cómo lograr lo siguiente - echar un vistazo a http://www.dspts.si

El primero 1/3 de la pantalla tiene un fondo vacío y de ahí en adelante no debe ser un patrón que se repite. Lo hice en este momento, creando un patrón muy largo png y la puse para compensar 300 y repetir-x. Sin embargo, no estoy feliz con esta solución, ya que se romperá si las páginas cada vez se hacen más largos que la imagen de fondo es png.

Gracias por cualquier sugerencia!

¿Fue útil?

Solución

Ponga el patrón repetitivo como fondo para el elemento html, a continuación, una imagen de 1px blanco * 300 píxeles como una imagen de fondo para el elemento body, y eso es todo. 

html, body {
    height: 100%;
}

html {
    background: url(dotted.png);
}

body {
    background: url(white_1x300.png) 0 0 repeat-x;
}

No es necesario utilizar etiquetas html y body para esto, pero es la forma más fácil y no requiere ninguna nueva marca.

Otros consejos

Puede especificar varios orígenes. Ver ¿Puedo tener múltiples imágenes de fondo usando CSS? . Las técnicas mencionadas allí son:

  • Poner toda la página en otro recipiente <div> o mal uso de la etiqueta <html> por ello.
    Esto significa que especifique un fondo para <body> y uno para <html>.
  • Usar CSS 3 que apoyan múltiples imágenes de fondo. Que aún no es soportado por todos los navegadores comunes.

Sí, especifique la imagen de fondo como de costumbre, pero establecer el background-position como esto: 

background-position:0 300px;

Esto hará que la imagen de fondo en el inicio 0px desde la izquierda, y 300px de la parte superior.

No hay que olvidar que se puede utilizar FireBug con FireFox para diagnosticar fácilmente técnicas en los sitios web.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top