How do I get the button below the parallax and get the image to display in the parallax?

HTML-CSS
1

When I tried running the code in the Tryit Editor from W3Schools the code below worked. I then added it to my glitch.com project and the background image was gone and the button was no longer below the parallax element. The code below is what I’ve already tried and from what I can tell, there’s no errors.

<style>
.parallax {
  background-image: url("https://cdn.glitch.global/c0f013b8-7db4-42ef-99ea-a90301f49450/stock-vector-abstract-watercolor-splash-watercolor-drop-278970998-transformed.jpg?v=1684623650329");
  background-repeat: no-repeat;
  height: 100%; 
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.box {
background: rgba(255, 255, 255, 0.34);
text-align: center;
position: absolute;
top: 50%;
font-family: 'Goudy Old Style', sans-serif;
left: 50%;
transform: translate(-50%, -50%);
width:10.6em;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7.6px);
-webkit-backdrop-filter: blur(7.6px);
border: 1px solid rgba(255, 255, 255, 0.3);
/* From https://css.glass */
background: rgba(255, 255, 255, 0.34);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7.6px);
-webkit-backdrop-filter: blur(7.6px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.book {
font-family: 'Goudy Old Style', sans-serif;
background-color:#eeeeee;
color:#333333;
font-weight:600;
border:none;
font-size:16px;
cursor:pointer;
padding:5px 10px;
border-radius:50px;
}
</style>
<div class="parallax">
<div class="box">
<p style="margin-bottom:-0.6em; font-size:2em">Simply</p><p style="margin-bottom:-0.6em; font-size:1.55em">Peaceful</p><h4>Massage Therapy</h4>
</div>
</div>
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.