How to use a PNG logo instead of the circle-CodePudding

How can I use a transparent PNG image instead of clipping the svg. Please help need a transparent PNG image instead of circle.

https://codepen.io/bhumikadas/pen/vYJEXKm

Here is the Javascript

var section = document.querySelector('section');
    window.addEventListener('scroll', function(){
    var value = window.scrollY;
    section.style.clipPath = "circle("  value  "px at center)"
 })

Thanks!

CodePudding user response：

If I understood the problem correctly, you need to change CSS section like background: url(/yourlink);

CodePudding user response：

It can be through specifying height width and giving border-radius to the image .
And value change on scroll

var section = document.querySelector('section');
        window.addEventListener('scroll', function(){
        var value = window.scrollY;
        section.style.height =  value  "px"
        section.style.width = value  "px"
    })

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

section {
  position: fixed;
  top: 0;
  left: 0;
  /*width: 100%;
  height: 100vh;*/
  background: url(https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg);
  background-size: contain;
  background-attachment: fixed;
  border-radius:500px;
}

.container {
  position: relative;
  margin-top: 200vh;
  background: #fff;
  padding: 100px;
}

.container h2 {
  font-size: 2.5em;
}

.title {
  position: relative;
  top: 250px;
  z-index: 1;
  font-size: 2em;
  text-align: center;
  width: 100%;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Join us</title>
</head>

<body>
  <h2 class="title">Join us for Better Future</h2>
  <section></section>
  <div class="container">
  </div>
</body>

</html>