fundo css repetindo a partir de 300 pixels em diante

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

  •  12-09-2019
  •  | 
  •  

Pergunta

Eu estou querendo saber se alguém sabe como conseguir o seguinte - dê uma olhada http://www.dspts.si

O primeiro 1 / 3rd da tela tem um fundo vazio e de lá em diante deve haver um padrão de repetição. Eu fiz isso agora, através da criação de um longo padrão png e configurá-lo para compensar 300 e repeat-x. No entanto, eu não estou feliz com esta solução porque vai quebrar se as páginas já teve mais tempo do que o fundo da imagem png é.

Obrigado por todas as sugestões!

Foi útil?

Solução

Coloque o padrão de repetição como pano de fundo para elemento html, em seguida, uma imagem de branco 1px * 300px como uma imagem de fundo para elemento body, e você está tudo definido. 

html, body {
    height: 100%;
}

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

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

Você não tem que usar html e body tag para este, mas é a maneira mais fácil e não requer qualquer nova marcação.

Outras dicas

Você pode especificar várias origens. Consulte Posso ter várias imagens de fundo usando CSS? . As técnicas mencionadas encontram-se:

  • Coloque a página inteira em um outro recipiente <div> ou mau uso da tag <html> para ele.
    Isto significa que você especifique um fundo para <body> e um para <html>.
  • Use CSS3 que suportam múltiplas imagens de fundo. Que ainda não é suportado por todos os navegadores comuns.

Sim, especifique sua imagem de fundo como normal, mas definir o background-position assim: 

background-position:0 300px;

Isso fará com que o início imagem de fundo na 0px da esquerda, e 300px do topo.

Não vamos esquecer que você pode usar FireBug com FireFox para facilmente técnicas diagnostica em sites.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top