Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Problemas com o Background-image

Galera, estou tentando colocar uma imagem de fundo no CSS mas por um motivo que não faço ideia de qual seja não está sendo possível!

o código HTML é este

<main class="main">
        <div class="container">
            <section class="sections">
                <section class="bloco" id="sec1">início</section>
                <section class="bloco" id="sec2">nossa história</section>
                <section class="bloco" id="sec3">
                    <!-- aqui tem a formatação da seção "sec3". Eu retirei pois é inútil para o tópico e só iria poluir mais -->
                </section>
                <section class="bloco" id="sec4">atrações</section>
                <section class="bloco" id="sec5">contato</section>
            </section>
        </div>
    </main>

Eu quero colocar uma imagem de fundo em cada um dos backgrounds das sections que possuem uma ID cada!

O CSS desta parte (retirei a parte das colunas e linhas só pra ficar mais simples de entender o código ) é este:

/* Main Sections - regular ainda*/
.sections {
    text-align: center;
    margin-top: 20vh;
}


/* Tamanho da Section - Menu*/
.bloco {
    width: 100%;
    display:  block;
}


/* Background das Sections */
#sec1 {
    background-color: orange;
    height: 100vh;
}
#sec2 {
    background-color: darkorange;
    height: 100vh;
}
#sec3 {
    height: auto;

}
#sec4 {
    background-color: green;
    height: 100vh;
}
#sec5 {
    background-color: pink;
    height: 100vh;
}

Agradeço de coração <3

10 respostas

Opa André, beleza?

Fiz um teste aqui e consegui colocar um background-image na seção 3, apenas com CSS. O código foi esse:

/* Main Sections - regular ainda*/
.sections {
    text-align: center;
    margin-top: 20vh;
}


/* Tamanho da Section - Menu*/
.bloco {
    width: 100%;
    display:  block;
}


/* Background das Sections */
#sec1 {
    background-color: orange;
    height: 100vh;
}
#sec2 {
    background-color: darkorange;
    height: 100vh;
}
#sec3 {
    height: 100vh;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRnuVdPxHxp2GSiRXDRHz5JTNzkTuF46onm3eurAA53ksEPtXc_");
    background-size: cover;
    background-position: center;
}
#sec4 {
    background-color: green;
    height: 100vh;
}
#sec5 {
    background-color: pink;
    height: 100vh;
}

Era esse o problema?

Espero ter ajudado, bons estudos!

Opa meu chefe beleza? Então, eu queria colocar uma imagem do meu computador saca? eu usei exatamente essa marcação que vc falou mas por algum motivo não está dando certo. A imagem tem um caminho assim "img/akkskaa.png" e mesmo eu mudando pra ".../img/ksksksks.png" n funcionou :/

Entendi. Essa pasta 'img' está na mesma pasta que o index.html?

Sim senhor! Esta pasta é a que uso pra guardar as imagens que linko com o HTML normalmente

Então você tem que ir pra força bruta! kkkk

No teu editor clica com o botão direito em cima da imagem e clica em 'copy path', aí você vai ter o caminho completo para a image, desde o 'C:Users...'

Cola esse path dentro da url que deve funcionar agora.

Ave maria kskks vo tentar amanhã de manhã e te mando o feedback. A performance vai ser lost demais mas conseguindo o background eu consigo continuar a escrever o site! Vlw irmão, amanhã volto aqui

Ai Daniel, não deu certo de jeito nenhum skksksk qq mais eu posso fazer? (tentei tanto no notebook quanto no desktop - um é linux o outro windows - e nada)

Coloca aqui o código css atualizado.

Ta ae

#sec2 {
    background-image: url("C:/Users/yang_/OneDrive/Área de Trabalho/sites/empório_corrêa/img/cardápio.jpg");
     background-size: cover;
       background-position: center;
    height: 100vh;
}
solução!

Depois de vários meses tinha até esquecido desse tópico e a resposta era apenas a formatação do código! Quando eu preciso acessar uma imagem que está em uma pasta "img" para que ela entre no código CSS que está em uma pasta "css", preciso usar o referencial '../' para voltar um diretório e assim acessar a imagem :D