<div id="content" class="content">
<div class="buttons">
        <button class="button" onclick="repeat()">repeat</button>
      
  <button class="button" onclick="repeatX()">repeat-x</button>  
    <button class="button" onclick="repeatY()">repeat-y</button> 
      <button class="button" onclick="noRepeat()">no-repeat</button>  
        <button class="button" onclick="space()">space</button> 
          <button class="button" onclick="round()">round</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; 
  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 repeat() {
  document.getElementById("content").style.backgroundRepeat="repeat" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-repeat: repeat;") {
    x.innerHTML = "background-repeat: repeat;";
  } else {
    x.innerHTML = "background-repeat: repeat;";
  }
}

function repeatX() {
  document.getElementById("content").style.backgroundRepeat="repeat-x" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-repeat: repeat-x;") {
    x.innerHTML = "background-repeat: repeat-x;";
  } else {
    x.innerHTML = "background-repeat: repeat-x;";
  }
}

function repeatY() {
  document.getElementById("content").style.backgroundRepeat="repeat-y" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-repeat: repeat-y;") {
    x.innerHTML = "background-repeat: repeat-y;";
  } else {
    x.innerHTML = "background-repeat: repeat-y;";
  }
}

function noRepeat() {
  document.getElementById("content").style.backgroundRepeat="no-repeat" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-repeat: no-repeat;") {
    x.innerHTML = "background-repeat: no-repeat;";
  } else {
    x.innerHTML = "background-repeat: no-repeat;";
  }
}

function space() {
  document.getElementById("content").style.backgroundRepeat="space" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-repeat: space;") {
    x.innerHTML = "background-repeat: space;";
  } else {
    x.innerHTML = "background-repeat: space;";
  }
}

function round() {
  document.getElementById("content").style.backgroundRepeat="round" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-repeat: round;") {
    x.innerHTML = "background-repeat: round;";
  } else {
    x.innerHTML = "background-repeat: round;";
  }
}