<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;";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.