How to superimpose and center one image to another?

Asked

Viewed 22 times

0

I would like to know how to overlay one image on another and center it, and I am using different Ivs for filter:Lur(25px); do not extend to the logo either (drunkerslogo.png)however I am having difficulty centralizing the drunkerslogo.png inside the fundobackground.png (superimposed)

follows the css file

    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;
    
}

and 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" is for my best view of the items

html css

1 answer

0


To achieve the overlap as you want, you must position the logo absolutely on the image, having as its relative element its Rent. I added the missing css. Please check.

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>

  • Thank you very much :D, I was a little confused regarding the use of the position:, but now it gave to understand

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.