<div id="content" class="content">
<div class="buttons">
        <button class="button" onclick="leftTop()">left top</button>
      
  <button class="button" onclick="leftCenter()">left center</button>  
    <button class="button" onclick="leftBottom()">left bottom</button> 
      <button class="button" onclick="rightTop()">right top</button>  
        <button class="button" onclick="rightCenter()">right center</button> 
          <button class="button" onclick="rightBottom()">right bottom</button> 
            <button class="button" onclick="centerTop()">center top</button> 
    <button class="button" onclick="centerCenter()">center center</button> 
  <button class="button" onclick="centerBottom()">center bottom</button> 
    <button class="button" onclick="percent()">25% 75%</button> 
  <button class="button" onclick="pixels()">150px 150px</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 leftTop() {
  document.getElementById("content").style.backgroundPosition="left top" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: left top;") {
    x.innerHTML = "background-position: left top;";
  } else {
    x.innerHTML = "background-position: left top;";
  }
}

function leftCenter() {
  document.getElementById("content").style.backgroundPosition="left center" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: left center;") {
    x.innerHTML = "background-position: left center;";
  } else {
    x.innerHTML = "background-position: left center;";
  }
}

function leftBottom() {
  document.getElementById("content").style.backgroundPosition="left bottom" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: left bottom;") {
    x.innerHTML = "background-position: left bottom;";
  } else {
    x.innerHTML = "background-position: left bottom;";
  }
}

function rightTop() {
  document.getElementById("content").style.backgroundPosition="right top" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: right top;") {
    x.innerHTML = "background-position: right top;";
  } else {
    x.innerHTML = "background-position: right top;";
  }
}

function rightCenter() {
  document.getElementById("content").style.backgroundPosition="right center" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: right center;") {
    x.innerHTML = "background-position: right center;";
  } else {
    x.innerHTML = "background-position: right center;";
  }
}

function rightBottom() {
  document.getElementById("content").style.backgroundPosition="right bottom" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: right bottom;") {
    x.innerHTML = "background-position: right bottom;";
  } else {
    x.innerHTML = "background-position: right bottom;";
  }
}

function centerTop() {
  document.getElementById("content").style.backgroundPosition="center top" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: center top;") {
    x.innerHTML = "background-position: center top;";
  } else {
    x.innerHTML = "background-position: center top;";
  }
}
function centerCenter() {
  document.getElementById("content").style.backgroundPosition="center center" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: center center;") {
    x.innerHTML = "background-position: center center;";
  } else {
    x.innerHTML = "background-position: center center;";
  }
}
function centerBottom() {
  document.getElementById("content").style.backgroundPosition="center bottom" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: center bottom;") {
    x.innerHTML = "background-position: center bottom;";
  } else {
    x.innerHTML = "background-position: center bottom;";
  }
}

function percent() {
  document.getElementById("content").style.backgroundPosition="25% 75%" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: 25% 75%;") {
    x.innerHTML = "background-position: 25% 75%;";
  } else {
    x.innerHTML = "background-position: 25% 75%;";
  }
}

function pixels() {
  document.getElementById("content").style.backgroundPosition="150px 150px" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "background-position: 150px 150px;") {
    x.innerHTML = "background-position: 150px 150px;";
  } else {
    x.innerHTML = "background-position: 150px 150px;";
  }
}






Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.