CSS problema de fundo repetida fixo

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

  •  10-07-2019
  •  | 
  •  

Pergunta

Eu estou projetando um site com um fundo repetido fixa, mas não pode trabalhar fora porque ele tem um problema.

Se você carregar o site em uma pequena janela, em seguida, deslocamento direita, o fundo não continuar e o show cor de fundo é em vez disso.

Todas as idéias?

site é: http://new.focalpix.co.uk/

CSS para o fundo é: 

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Foi útil?

Solução

Tente o seguinte CSS: 

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

Parece que (em ambos Opera e Chrome) o navegador está tratando a área externa janela inicial do navegador como parte da tag HTML, mas não parte do corpo. Você pode verificar isso, colocando a imagem de fundo no HTML, mas não a marca BODY - e depois ver como ele aparece apenas na área de rolagem-to-view do documento. Eu não tenho idéia por que isso está acontecendo - ninguém

?

CSS acima aparece para corrigir o problema, no entanto.

Outras dicas

você definiu corpo fundo:. Url na linha style.css 13, mas as regras também definidas para o fundo do corpo na regra começando na linha 17

A regra na linha 17 é para o corpo, html, mas a única começando na linha 11 é apenas para o corpo. Você provavelmente poderia condensar isso em uma regra, definindo exatamente o que você quer o fundo a ser - uma cor ou uma imagem de um url

Isto é devido ao fato de que a tag <body> é definido por padrão a 100% da largura da janela do navegador - e não o site. Isto significa que quando a largura da janela é inferior a 960 - a largura do seu site, o bloco termina corpo. Para corrigir isso, basta definir: 

body {min-width: 960px}

Infelizmente, min-width não funciona no versões antigas do Internet Explorer sem JavaScript cortar chamado minmax . Gostaria de sugerir anexando o código javascript para ele dentro de alguns comentários condicionais para evitar uma solicitação HTTP desnecessários e erros de compatibilidade potenciais em novos navegadores. Então incorporar minmax assim: 

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

Além disso, uma dica geral -. Estas questões são relativamente fáceis de resolver, jogando com firebug

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