1

Estou com um problema para deixar um background img no body{} reponsive. img: inserir a descrição da imagem aqui

codigo:

body{

    background-position: center;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: 100%;
    margin: 0; 
    font-family: 'Lato', sans-serif;
     background: url(../img/fundo.jpg); 

}

alguém poderia me ajudar?

2 Respostas 2

3

Troque background: url(../img/fundo.jpg); por background-image: url(../img/fundo.jpg);. Quando você usa só background está usando um atalho para várias propriedades ao mesmo tempo. Isso está sobrescrevendo seu background-position, -size, -repeat e -attachment com os valores padrões.

1
  • Vlw mano obrigado!
    – Felipe
    Commented 3/01/2018 às 16:34
1

Primeiro coloque um tamanho no html e body para não ter problemas de resize.

Depois o Browser lê os CSS de Cima para Baixo, então primeiro você precisa declarar o Background (que é um "atalho" onde vc pode inserir vários atributos em uma só linha), depois os atributos dele.

background: url(http://placeskull.com/500/500); 
background-position: center;
background-repeat: no-repeat; 
etc...

Ou assim

background: url(http://placeskull.com/500/500) center no-repeat fixed / 100%; 

Veja no Snippet

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #000000;
    font-family: 'Lato', sans-serif;
    background: url(http://placeskull.com/500/500); 
    background-position: center;
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: 100%; 
}

OBS: Devido a ordem de leitura do CSS pelo Browser se for usado algum "atalho" de classe como Borde ou Background podem ocorrer problemas. Principalmente se um atributo depender do outro para ser renderizado pelo Browser. Veja abaixo.

Por exemplo esse CSS não vai dar certo:

border-color: #f00;
border-style: dashed;
border: 2px;

Já assim vai funcionar:

border: 2px;
border-color: #f00;
border-style: dashed;
19
  • fiz e não deu as img continua repetindo, será q pode ser o bootstrap?
    – Felipe
    Commented 3/01/2018 às 16:23
  • @Felipe Fiz uma edição no snippet executa ele ai que vc vai ver como ficou
    – hugocsl
    Commented 3/01/2018 às 16:25
  • 1
    @Felipe foi sim! Você primeiro precisa declarar o BackGround, depois os atributos que ele vai ter como background-repeat: background-sizet: etc, se colocar esses atributos antes o CSS vai ler errado
    – hugocsl
    Commented 3/01/2018 às 16:32
  • 2
    Não é um problema de ordem – apesar da mudança de ordem resolver o problema. É que propriedades como border e background são atalhos para várias outras ao mesmo tempo. Se você só define uma delas (por exemplo, o espessura da borda em border), as demais assumem o valor padrão.
    – bfavaretto
    Commented 3/01/2018 às 16:47
  • 1
    Não @Felipe, se a imagem é pequena o browser vai esticar ela e perder qualidade, não tem jeito.
    – bfavaretto
    Commented 3/01/2018 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .