<div id="content" class="content">
<div class="buttons">
        <button class="button" onclick="auto()">auto</button>
      
  <button class="button" onclick="lengthPx()">length (pixels)</button>  
    <button class="button" onclick="lengthPercent()">length (percents)</button> 
      <button class="button" onclick="cover()">cover</button>  
        <button class="button" onclick="contain()">contain</button> 
          
          
  </div>
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
</div>

body { 
  height: 100vh;
  overflow: hidden;
}

.content {
  position: relative;
  background-image: url('https://lenadesign.org/wp-content/uploads/2020/09/cropped-logo.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center; 
  background-size: auto;
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons {
  left:15%;
  position: absolute;
  z-index:1;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 100%;
  left:25%;
}

function auto() {
  document.getElementById("content").style.backgroundSize="auto" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-size: auto;") {
    x.innerHTML = "background-size: auto;";
  } else {
    x.innerHTML = "background-size: auto;";
  }
}

function lengthPx() {
  document.getElementById("content").style.backgroundSize="50px 50px" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-size: 50px 50px;") {
    x.innerHTML = "background-size: 50px 50px;";
  } else {
    x.innerHTML = "background-size: 50px 50px;";
  }
}

function lengthPercent() {
  document.getElementById("content").style.backgroundSize="25% 50%" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-size: 25% 50%;") {
    x.innerHTML = "background-size: 25% 50%;";
  } else {
    x.innerHTML = "background-size: 25% 50%;";
  }
}

function cover() {
  document.getElementById("content").style.backgroundSize="cover" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-size: cover;") {
    x.innerHTML = "background-size: cover;";
  } else {
    x.innerHTML = "background-size: cover;";
  }
}

function contain() {
  document.getElementById("content").style.backgroundSize="contain" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-size: contain;") {
    x.innerHTML = "background-size: contain;";
  } else {
    x.innerHTML = "background-size: contain;";
  }
}