Rosenberg Rosenberg - 3 days ago 4
HTML Question

Using this particular <Div> as a background

The full code:

<!DOCTYPE html>
<html>
<head>
<style>
#sunset:checked ~ * {
--sunset: 1;
--sunrise: 0;
--color-building-dark: #00436F;
--color-building: #0258C6;
--color-building-light: #1771C5;
--color-cloud: #9ED5F8;
}
#sunrise:checked ~ * {
--sunrise: 1;
--sunset: 0;
--color-building-dark: #50A8E3;
--color-building: #9BD9FE;
--color-building-light: #E5F7FE;
--color-cloud: white;
}
:root {
--color-window-dark: #3B98D8;
--color-window-light: white;
}
#app {
width: 100%;
height: 100%;
padding: 0 2rem;
display: flex;
flex-direction: row;
z-index: 1;
position: relative;
font-family: Montserrat, sans-serif;
}
#app * {
font-weight: 600;
letter-spacing: 1px;
}
#app > .times {
flex: 0 0 70%;
}
#app > .heavens {
flex: 0 0 30%;
}
#app:before, #app:after {
content: '';
position: absolute;
display: block;
width: 100vw;
height: 100vh;
left: calc(50% - 50vw);
top: calc(50% - 50vh);
z-index: -10;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
#app:before {
background: linear-gradient(to bottom, #73DAF9, #E5F7FE);
opacity: var(--sunrise);
}
#app:after {
background: linear-gradient(to bottom, #0846B0, #23B2EE);
opacity: var(--sunset);
}
.sky {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}
.sky:before, .sky:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
z-index: -1;
}
.sky:before {
background: linear-gradient(to bottom, #2CA4F4, #C2E6FB);
opacity: var(--sunrise);
}
.sky:after {
background: linear-gradient(to bottom, #043385, #1797D7);
opacity: var(--sunset);
}
.times {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 0.5rem;
overflow: hidden;
}
.time {
color: white;
}
.time:nth-child(1) {
animation-delay: 0s !important;
}
.time:nth-child(2) {
animation-delay: 0.05s !important;
}
.time:nth-child(3) {
animation-delay: 0.1s !important;
}
.time:nth-child(4) {
animation-delay: 0.15s !important;
}
.time:nth-child(5) {
animation-delay: 0.2s !important;
}
.time:first-child:after {
font-size: 2.5rem;
}
.time:first-child ~ .time {
opacity: 0.5;
}
.time:before {
content: '';
display: block;
left: calc(50% - 0.8rem);
margin-bottom: 0.5rem;
width: 0;
height: 0;
border-width: 0.8rem;
border-style: solid;
border-color: transparent;
border-bottom-color: white;
}
.time:after {
font-size: 2rem;
}
.city {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windows {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: repeating-linear-gradient(to top, #044DA8 0, #044DA8 6px, transparent 6px, transparent var(--window-space, 14px));
overflow: hidden;
}
.windows, .windows:before, .windows:after {
background-clip: content-box !important;
}
.windows:before, .windows:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windows:before {
background: repeating-linear-gradient(to top, var(--window-color, var(--color-window-light)) 0, var(--window-color, var(--color-window-light)) 6px, transparent 6px, transparent var(--window-space, 14px));
opacity: var(--sunrise);
}
.windows:after {
background: repeating-linear-gradient(to top, gold 0, gold 6px, transparent 6px, transparent var(--window-space, 14px));
opacity: var(--sunset);
transition-delay: calc(var(--sunset, 0) * 1.5s);
transition-duration: 0.75s;
}
.ledge {
width: 100%;
height: 0;
padding: 50% 0;
overflow: hidden;
}
.ledge:before {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: right top;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
}
.ledge:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
height: 4px;
width: 100%;
background: var(--color-building);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.building {
position: absolute;
bottom: 0;
height: 60%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
z-index: 1;
}
.building > .tower {
bottom: 0;
z-index: 1;
background: currentColor;
}
.building > .tower, .building > .tower:before, .building > .tower:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
.building:nth-child(1) {
left: 64px;
height: 145px;
}
.building:nth-child(1) > .tower:nth-child(1) {
--color-pointy: var(--color-building-dark);
width: 21px;
height: 70%;
background: white;
color: var(--color-building-dark);
background: currentColor;
--window-color: var(--color-window-dark);
}
.building:nth-child(1) > .tower:nth-child(1):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 15px -5px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom right;
transform: skewY(-45deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1) .windows, .building:nth-child(1) > .tower:nth-child(1) .windows:before, .building:nth-child(1) > .tower:nth-child(1) .windows:after {
padding-right: 8px;
}
.building:nth-child(1) > .tower:nth-child(2) {
--color-pointy: var(--color-building);
width: 50px;
height: 100%;
color: var(--color-building);
}
.building:nth-child(1) > .tower:nth-child(2):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 45%;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom right;
transform: skewY(-55deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(2) .windows, .building:nth-child(1) > .tower:nth-child(2) .windows:before, .building:nth-child(1) > .tower:nth-child(2) .windows:after {
padding-left: 12px;
}
.building:nth-child(1) > .tower:nth-child(3) {
--color-pointy: var(--color-building);
width: 21px;
height: 90%;
color: var(--color-building);
transform-origin: bottom left;
}
.building:nth-child(1) > .tower:nth-child(3):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 5px -15px 0 var(--color-pointy), 10px -5px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom left;
transform: skewY(30deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3) .windows, .building:nth-child(1) > .tower:nth-child(3) .windows:before, .building:nth-child(1) > .tower:nth-child(3) .windows:after {
padding-left: 12px;
}
.building:nth-child(2) {
left: 284px;
height: 250px;
}
.building:nth-child(2) > .tower:nth-child(1), .building:nth-child(2) > .tower:nth-child(3) {
width: 38px;
height: 50%;
}
.building:nth-child(2) > .tower:nth-child(1) .windows, .building:nth-child(2) > .tower:nth-child(1) .windows:before, .building:nth-child(2) > .tower:nth-child(1) .windows:after, .building:nth-child(2) > .tower:nth-child(3) .windows, .building:nth-child(2) > .tower:nth-child(3) .windows:before, .building:nth-child(2) > .tower:nth-child(3) .windows:after {
padding: 0 6px;
}
.building:nth-child(2) > .tower:nth-child(1) {
color: var(--color-building-dark);
--color-pointy: var(--color-building-dark);
--window-color: var(--color-window-dark);
--window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(1):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 10px 15px 0 var(--color-pointy), 20px 20px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 4px;
width: 100%;
background: var(--color-building);
}
.building:nth-child(2) > .tower:nth-child(2) {
width: 62px;
height: 100%;
color: var(--color-building);
--color-pointy: var(--color-building);
--window-color: var(--color-window-light);
--window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(2):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 20px 5px 0 var(--color-pointy), 40px 15px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(2):before {
content: '';
height: 100%;
position: absolute;
top: 0;
display: block;
width: 20px;
background: var(--color-building-dark);
}
.building:nth-child(2) > .tower:nth-child(2) .windows, .building:nth-child(2) > .tower:nth-child(2) .windows:before, .building:nth-child(2) > .tower:nth-child(2) .windows:after {
padding-left: 30px;
}
.building:nth-child(2) > .tower:nth-child(3) {
color: var(--color-building);
--window-space: 20px;
}
.building:nth-child(3) {
left: 554px;
height: 180px;
}
.building:nth-child(3) > .tower:nth-child(1) {
--color-pointy: var(--color-building-dark);
width: 21px;
height: 70%;
background: white;
color: var(--color-building-dark);
background: var(--color-building-dark);
--window-color: var(--color-window-dark);
}
.building:nth-child(3) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom right;
transform: skewY(-55deg);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(1) .windows, .building:nth-child(3) > .tower:nth-child(1) .windows:before, .building:nth-child(3) > .tower:nth-child(1) .windows:after {
padding-right: 8px;
}
.building:nth-child(3) > .tower:nth-child(2) {
--color-pointy: var(--color-building);
width: 30px;
height: 100%;
color: var(--color-building);
}
.building:nth-child(3) > .tower:nth-child(2):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 10px 20px 0 var(--color-pointy), 14px 23px 0 var(--color-pointy), 20px 15px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(2):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 4px;
width: 100%;
background: var(--color-building-light);
}
.building:nth-child(3) > .tower:nth-child(2) .windows, .building:nth-child(3) > .tower:nth-child(2) .windows:before, .building:nth-child(3) > .tower:nth-child(2) .windows:after {
padding-left: 12px;
}
.building:nth-child(3) > .tower:nth-child(3) {
--color-pointy: var(--color-building);
width: 40px;
height: 70%;
color: var(--color-building);
transform-origin: bottom left;
}
.building:nth-child(3) > .tower:nth-child(3):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 60px;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
transform-origin: bottom left;
transform: skewY(50deg);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(3) .windows, .building:nth-child(3) > .tower:nth-child(3) .windows:before, .building:nth-child(3) > .tower:nth-child(3) .windows:after {
padding-left: 12px;
}
.heavens {
position: absolute;
width: 200px;
right: 0;
top: 0;
z-index: 10;
height: 100%;
overflow: hidden;
}
[class ="sun"] {
position: absolute;
text-align: center;
width: 100%;
cursor: pointer;
}
[class ="sun"]:before {
content: attr(data-title);
display: inline-block;
width: 100%;
margin: 2rem 0;
color: white;
font-size: 1.5rem;
}
[class ="sun"]:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
margin-top: 1rem;
content: '';
display: inline-block;
width: 100%;
border-radius: 50%;
}
.glow {
width: 200px;
height: 200px;
z-index: -1;
position: absolute;
right: 0;
filter: blur(50px);
}
.glow:before, .glow:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.glow:before {
background: #FFFAAD;
}
.glow:after {
background: white;
}
.sunrise:after {
width: 78px;
height: 78px;
background: #FFFAAD;
box-shadow: 0 0 0 1rem rgba(255, 250, 173, 0.3);
}
.sunset:before {
margin-bottom: 3rem;
}
.sunset:after {
width: 52px;
height: 52px;
background: white;
box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0.3), 0 0 0 2rem rgba(255, 255, 255, 0.15);
}
.clouds {
overflow: hidden;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10rem;
z-index: 1;
transition: box-shadow 3s cubic-bezier(0.25, 0, 0.1, 1);
}
.clouds:before, .clouds:after {
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
animation-fill-mode: forwards;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.clouds:before {
background: white;
box-shadow: 77px 11px 0 white, 170px 60px 0 white, 233px 32px 0 white, 319px 45px 0 white, 393px 54px 0 white, 474px 35px 0 white, 553px 36px 0 white, 644px 43px 0 white, 711px 32px 0 white, 808px 54px 0 white;
animation-name: clouds-sunrise;
}
.clouds:after {
background: #9ED5F8;
opacity: var(--sunset);
box-shadow: 77px 11px 0 #9ED5F8, 170px 60px 0 #9ED5F8, 233px 32px 0 #9ED5F8, 319px 45px 0 #9ED5F8, 393px 54px 0 #9ED5F8, 474px 35px 0 #9ED5F8, 553px 36px 0 #9ED5F8, 644px 43px 0 #9ED5F8, 711px 32px 0 #9ED5F8, 808px 54px 0 #9ED5F8;
animation-name: clouds-sunset;
}
@keyframes clouds-sunrise {
to {
box-shadow: 77px 15px 0 white, 170px 49px 0 white, 233px 27px 0 white, 319px 46px 0 white, 393px 57px 0 white, 474px 22px 0 white, 553px 33px 0 white, 644px 49px 0 white, 711px 26px 0 white, 808px 44px 0 white;
}
}
@keyframes clouds-sunset {
to {
box-shadow: 77px 15px 0 #9ED5F8, 170px 49px 0 #9ED5F8, 233px 27px 0 #9ED5F8, 319px 46px 0 #9ED5F8, 393px 57px 0 #9ED5F8, 474px 22px 0 #9ED5F8, 553px 33px 0 #9ED5F8, 644px 49px 0 #9ED5F8, 711px 26px 0 #9ED5F8, 808px 44px 0 #9ED5F8;
}
}
.clouds:before, .clouds:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
transition-timing-function: ease-in-out;
width: 10rem;
height: 10rem;
top: 5rem;
left: -5rem;
border-radius: 50%;
content: '';
display: block;
position: absolute;
}
.stars {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.stars:before, .stars:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
opacity: var(--sunset);
content: '';
display: block;
position: absolute;
border-radius: 50%;
}
.stars:before {
height: 3px;
width: 3px;
box-shadow: 438px 133px 2px white, 524px 13px 2px white, 195px 229px 1px white, 23px 134px 4px white, 141px 123px 4px white, 542px 146px 2px white, 748px 20px 1px white, 84px 126px 2px white, 153px 92px 3px white, 408px 171px 4px white, 445px 143px 1px white, 134px 75px 3px white, 270px 189px 1px white, 442px 325px 1px white, 129px 234px 3px white, 737px 187px 1px white, 223px 142px 1px white, 246px 105px 2px white, 98px 57px 4px white, 708px 319px 1px white, 164px 16px 4px white, 348px 168px 2px white, 481px 134px 2px white, 61px 174px 3px white, 241px 115px 3px white, 734px 206px 2px white, 107px 63px 4px white, 262px 310px 1px white, 243px 174px 4px white, 386px 172px 2px white;
}
.stars:after {
height: 5px;
width: 5px;
box-shadow: 270px 128px 2px white, 438px 262px 4px white, 746px 25px 4px white, 107px 278px 2px white, 681px 115px 1px white, 716px 77px 2px white, 308px 104px 4px white, 636px 171px 1px white, 436px 271px 4px white, 118px 89px 4px white, 407px 291px 1px white, 630px 77px 1px white, 737px 32px 2px white, 227px 66px 1px white, 148px 37px 3px white, 554px 258px 1px white, 650px 290px 4px white, 270px 160px 2px white, 647px 144px 3px white, 247px 277px 3px white, 434px 97px 2px white, 95px 24px 4px white, 614px 52px 3px white, 431px 338px 3px white, 496px 328px 3px white, 303px 74px 1px white, 557px 304px 3px white, 466px 167px 1px white, 689px 334px 4px white, 588px 147px 1px white;
transition-delay: calc(var(--sunset) * 1.5s);
}
input {
position: absolute;
visibility: hidden;
pointer-events: none;
}
#sunrise:checked ~ #app .time {
animation: time-move-sunrise 1.5s none;
}
#sunrise:checked ~ #app .time:after {
content: '';
animation: time-change-sunrise 2.5s both;
}
#sunrise:checked ~ #app .heavens > .sunset:before {
animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunset:after {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunrise {
pointer-events: none;
}
#sunrise:checked ~ #app .heavens > .sunrise:before {
animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunrise:after {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .glow:before {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .glow:after {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .ledge:before {
animation: ledge-shadow-sunrise 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
@keyframes ledge-shadow-sunrise {
50% {
transform: skewX(-25deg);
}
60% {
transform: skewX(-80deg);
}
from, to {
animation-timing-function: ease;
transform: skewX(-45deg);
}
}
@keyframes time-move-sunrise {
50% {
transform: translateY(-25%);
opacity: 0;
}
}
#sunset:checked ~ #app .time {
animation: time-move-sunset 1.5s none;
}
#sunset:checked ~ #app .time:after {
content: '';
animation: time-change-sunset 2.5s both;
}
#sunset:checked ~ #app .heavens > .sunrise:before {
animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunrise:after {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunset {
pointer-events: none;
}
#sunset:checked ~ #app .heavens > .sunset:before {
animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunset:after {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .glow:after {
animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .glow:before {
animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .ledge:before {
animation: ledge-shadow-sunset 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
@keyframes ledge-shadow-sunset {
50% {
transform: skewX(-25deg);
}
60% {
transform: skewX(-80deg);
}
from, to {
animation-timing-function: ease;
transform: skewX(-45deg);
}
}
@keyframes time-move-sunset {
50% {
transform: translateY(-25%);
opacity: 0;
}
}
@keyframes circle-leave {
50% {
transform: translateY(-50%);
opacity: 1;
}
to {
animation-timing-function: ease-out;
transform: translateY(60vh);
opacity: 0;
}
}
@keyframes circle-enter {
from {
opacity: 0;
transform: translateY(-50vh);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes time-change-sunrise {
from {
content: attr(data-sunset);
}
to {
content: attr(data-sunrise);
}
}
@keyframes time-change-sunset {
from {
content: attr(data-sunrise);
}
to {
content: attr(data-sunset);
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
z-index: -100;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
.background {
z-index: -100;
}
</style>
</head>
<body>
<input type="radio" name="time" id="sunrise" />
<input type="radio" name="time" id="sunset" checked />
<div id="app">
<div class="glow"></div>
<div class="sky"></div>
<div class="stars"></div>
<div class="city">
<div class="building">
<div class="tower">
<div class="windows"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
<div class="tower">
<div class="windows"></div>
</div>
</div>
<div class="building">
<div class="tower">
<div class="windows"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
</div>
<div class="building">
<div class="tower">
<div class="windows"></div>
</div>
<div class="tower">
<div class="windows"></div>
<div class="ledge"></div>
</div>
<div class="tower">
<div class="windows"></div>
</div>
</div>
</div>
<div class="times">
<div class="time"
data-sunrise="7:20"
data-sunset="9:14"
></div>
<div class="time"
data-sunrise="7:25"
data-sunset="9:18"
></div>
<div class="time"
data-sunrise="7:29"
data-sunset="9:23"
></div>
<div class="time"
data-sunrise="7:32"
data-sunset="9:32"
></div>
<div class="time"
data-sunrise="7:37"
data-sunset="9:37"
></div>
</div>
<div class="heavens">
<label for="sunrise" class="sunrise" data-title="Sunrise"></label>
<label for="sunset" class="sunset" data-title="Sunset"></label>
</div>
<div class="clouds"></div>
</div>
</body>
</html>


Result:

enter image description here

What I'm trying to achieve:

I wanna have it as the background of a section of my website. So I added this:

.background { z-index: -100; }


And then I wrapped everything from the div part in another div & added class="background".

Catastrophic results:

enter image description here

In fact, the results above happened long before I added the class "background". It was as soon as I added an extra div wrapping the whole thing up.

My question is:

Why is it breaking the code to add an extra div on top of all the other divs?

How can I successfully produce the whole landscape as my background and add content on top of it?

Thanks.

Answer

For z-index to work you need non-static position of element, also I suggest wrap all content to some wrapper

.background {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.content-wrapper {
    position: relative;
    z-index: 2;
}
Comments