How to get this text on top of css styling

Question

I've made a cool html page (with CSS, of course) that creates like a space animated background. Now, I know this might sound like a stupid question, but how do I put text on top of it?

The html is as follows:

<div class="background-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="clouds"></div>
    <div>
        <h1>HEADER 1</h1>
    </div>
</div>

Can I do it if I take HEADER 1 out of the div?

<h1>HEADER 1</H1> is what I'm trying to get to be shown on top of the other things (stars, twinkling, clouds, etc) but I'm not really sure how to do it.

Can anyone please help? Thanks.

Here's the full code (open in a larger window):

<!DOCTYPE html>
<style>
    @keyframes move-background {
  from {
        -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
        -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
@-webkit-keyframes move-background {
  from {
        -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
        -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}

@-moz-keyframes move-background {    
    from {
        -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
        -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}

    @-webkit-keyframes move-background {
    from {
        -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
        -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}

.background-container{
    position: fixed;
    top: 0;
    left:0;
    bottom: 0;
    right: 0;
}

.stars {
 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
 position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: 0;
}

.twinkling{
    width:10000px;
    height: 100%;
    background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
    background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
    
}

.clouds{
    width:10000px;
    height: 100%;
    background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
    background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;

   -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}
img{
  height: 70vh;
  width:70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
<div class="background-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="clouds"></div>
    <div class="centered">
        <h1>HEADER 1</h1>
    </div>
</div>

</html>

You should search for terms like: `position in css` and `z-index`. — Amaury Hanser, Oct 05 '20 at 07:33

DreamTeK · Accepted Answer · 2020-10-05T08:38:28.627

I would use position absolute and apply a z-index to layer the h1 above the background. You can then offset the position relative to the container.

@keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

@-webkit-keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

@-moz-keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

@-webkit-keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.stars {
  background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  z-index: 0;
}

.twinkling {
  width: 10000px;
  height: 100%;
  background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  -moz-animation: move-background 70s linear infinite;
  -ms-animation: move-background 70s linear infinite;
  -o-animation: move-background 70s linear infinite;
  -webkit-animation: move-background 70s linear infinite;
  animation: move-background 70s linear infinite;
}

.clouds {
  width: 10000px;
  height: 100%;
  background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  -moz-animation: move-background 150s linear infinite;
  -ms-animation: move-background 150s linear infinite;
  -o-animation: move-background 150s linear infinite;
  -webkit-animation: move-background 150s linear infinite;
  animation: move-background 150s linear infinite;
}

img {
  height: 70vh;
  width: 70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  z-index: 10;
}

<div class="background-container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="clouds"></div>
</div>

<div class="content">
  <h1>HEADER 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ex leo, lobortis eget libero in, venenatis tincidunt ipsum. Nulla ultrices purus in ornare ultricies. In et faucibus justo. Nunc in tempus diam, nec facilisis eros. Quisque non quam id mi rutrum volutpat vel ac purus. Suspendisse potenti. Etiam non orci porttitor, lacinia magna eget, imperdiet ex. Pellentesque bibendum ligula vel elit tincidunt, quis aliquam nisl consequat. Pellentesque facilisis lectus ac orci commodo, ac cursus nibh mollis. Nunc turpis ipsum, laoreet sit amet odio sit amet, aliquam dignissim nisi. Suspendisse potenti.</p>

  <p>Nullam at sodales urna, quis pellentesque lectus. Aenean a augue consequat, viverra libero ut, varius ex. Duis id ipsum sed risus aliquet consectetur. Aliquam facilisis nunc quis purus rutrum lobortis. Praesent mollis tincidunt quam at molestie. Nulla volutpat congue leo, at malesuada tortor ornare eget. Suspendisse porta ipsum vel enim lobortis, non aliquam tortor convallis. Aenean maximus, nibh ut sollicitudin porta, justo ipsum auctor mauris, vitae sagittis nisl lectus vel orci. In hac habitasse ictumst. Suspendisse ultricies lobortis accumsan. Nulla turpis justo, tristique sed magna et, pretium elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis quam a nisl efficitur posuere.</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ex leo, lobortis eget libero in, venenatis tincidunt ipsum. Nulla ultrices purus in ornare ultricies. In et faucibus justo. Nunc in tempus diam, nec facilisis eros. Quisque non quam id mi rutrum volutpat vel ac purus. Suspendisse potenti. Etiam non orci porttitor, lacinia magna eget, imperdiet ex. Pellentesque bibendum ligula vel elit tincidunt, quis aliquam nisl consequat. Pellentesque facilisis lectus ac orci commodo, ac cursus nibh mollis. Nunc turpis ipsum, laoreet sit amet odio sit amet, aliquam dignissim nisi. Suspendisse potenti.</p>

  <p>Nullam at sodales urna, quis pellentesque lectus. Aenean a augue consequat, viverra libero ut, varius ex. Duis id ipsum sed risus aliquet consectetur. Aliquam facilisis nunc quis purus rutrum lobortis. Praesent mollis tincidunt quam at molestie. Nulla volutpat congue leo, at malesuada tortor ornare eget. Suspendisse porta ipsum vel enim lobortis, non aliquam tortor convallis. Aenean maximus, nibh ut sollicitudin porta, justo ipsum auctor mauris, vitae sagittis nisl lectus vel orci. In hac habitasse ictumst. Suspendisse ultricies lobortis accumsan. Nulla turpis justo, tristique sed magna et, pretium elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis quam a nisl efficitur posuere.</p>
</div>

That seems to interrupt the other classes ("stars, twinkling, clouds") they're not visible. It just ends up being a moon picture with the text, and nothing else. Is there something else I should add to stop this from happening? — scob_, Oct 05 '20 at 07:40
I am unable to see the effects and thus provide a clear solution unless you provide a complete example of the css you are using. Can you create a snippet that will show us your full effects? And I gathered it was not you. It will be the CSS police that patrol this site stomping around their authority. — DreamTeK, Oct 05 '20 at 07:42
Thank you! Just one last thing - how can I make the page scrollable (so you can see information below). Sorry, I'm new to this sort of stuff - Python and Perl are more my forte! — scob_, Oct 05 '20 at 08:21
@scob I have refactored the answer for you. Try the changes above. The effect looks cool btw. Nice! — DreamTeK, Oct 05 '20 at 08:38

How to get this text on top of css styling

1 Answers1