0

Gostaria de saber como faço para sobrepor uma imagem sobre outra e centraliza-la, sendo que, estou usando divs diferentes para o filter:blur(25px); não se estenda para a logo também (drunkerslogo.png), porém estou com dificuldade para centralizar o drunkerslogo.png dentro do fundobackground.png (sobreposto)

segue o arquivo css

    body {
    background: black;
}

#site {
    width: auto;
    border: 1px solid red;
    background: black;


}

#background {
    width: 100%;
    height: 1080px;
    border: 1px solid red;
    background: url(imagens/fundobackground.png) no-repeat;
    background-size: cover;
    filter: blur(25px);

}


#logo {
    width: 540px;
    height: 540px;
    border: 1px solid red;
    
}   
    

e o html

Drunkers
<body>
    <div id="site">
        <div id="primeira-parte">
            <div id="background"></div>
            <div><img src="imagens/drunkerslogo.png" id="logo"></div>
        </div>
        
    </div>


</body>

"border" é para minha melhor visualização dos itens

1 Resposta 1

0

Para alcançar a sobreposição como pretende, deve posicionar absolutamente o logo sobre a imagem, tendo como elemento relativo o seu parent. Adicionei o css em falta. Por favor verifique.

body {
  background: black;
}

#site {
  width: auto;
  border: 1px solid red;
  background: black;
}

#background {
  width: 100%;
  height: 1080px;
  border: 1px solid red;
  background: url(imagens/fundobackground.png) no-repeat;
  background-size: cover;
  filter: blur(25px);
}

#logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 540px;
  height: 540px;
  border: 1px solid red;
}

#primeira-parte {
  position: relative;
}
<body>
  <div id="site">
    <div id="primeira-parte">
      <div id="background"></div>
      <div>
        <img src="https://via.placeholder.com/540/ffffff/000000/?text=LOGO" id="logo">
      </div>
    </div>
  </div>
</body>

1
  • Muito obrigado :D, estava um pouco confuso em relação ao uso do position:, mas agora deu para entender
    – fyxel
    Commented 24/01/2021 às 23:30

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 .