My text is engulfed by a mesmerizing animated background

My project involves incorporating an animated background that I found on CodePen. However, when I try to add text or titles over the animation, they do not display correctly. This is my first time using this site and I could really use some assistance. The goal is to have the background animation in place while being able to overlay my website content on top of it.

* {
    margin: 0;
    padding: 0;
}
.expo { 
width: 200px;
height: 200px;
z-index: 1;
background: white;
}

h1{
font-family: sans-serif;
font-size: 50px;
color: white;
z-index: 2;
}

/* Stars */
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}


.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:1200px;
  display:block;
}

.stars {
  background:rgba(0, 0, 0, 1) url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 400s linear infinite;
  -ms-animation:move-twink-back 400s linear infinite;
  -o-animation:move-twink-back 400s linear infinite;
  -webkit-animation:move-twink-back 400s linear infinite;
  animation:move-twink-back 400s linear infinite;
}




/* email */
.container {
max-width:400px;
width:100%;
margin:0 auto;
position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
background:#F9F9F9;
padding:25px;
margin:50px 0;
}

#contact h3 {
color: #000000;
display: block;
font-size: 30px;
font-weight: 400;
}

#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}

fieldset {
border: medium none !important;
margin: 0 -10px 10px;
min-width: 100%;
padding: 0;
width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}

#contact textarea {
height:100px;
max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#0CF;
color:#FFF;
margin:0 0 5px;
padding:10px;
font-size:15px;
}

#contact button[type="submit"]:hover {
background:#000aff;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"/>

<title> Memento Mori </title>

</head>
<body class="fade-in">
<div class"expo">
<h1>Memento Mori</h1>
<h2>a reminder of death</h2>
</div>


</body> 
<footer>
<div class="stars"></div>
<div class="twinkling"></div>
</footer>
                     </html>
csshtmlcoda

Answer №1

Welcome to our coding forum. It seems like you attempted to apply z-index on the elements with classes .expo and heading. However, I can't recall if z-index is compatible with position:relative;

Here's a potential solution:

.stars {
  // background..
  z-index:-2;
}
.twinkling{
  // background..
  z-index:-1;
}

These adjustments to the z-index values should work since you have specified position:absolute; for these classes

Answer №2

* {
    margin: 0;
    padding: 0;
}
.expo { 
width: 200px;
height: 80px;
z-index: 1;
background: white;
}

h1{
font-family: sans-serif;
font-size: 50px;
color: white;
z-index: 2;
}

/* Stars */
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}


.stars, .twinkling {
  position:absolute;
  top:100px; /*Updated for better positioning*/
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:1200px;
  display:block;
}

.stars {
  background:rgba(0, 0, 0, 1) url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 400s linear infinite;
  -ms-animation:move-twink-back 400s linear infinite;
  -o-animation:move-twink-back 400s linear infinite;
  -webkit-animation:move-twink-back 400s linear infinite;
  animation:move-twink-back 400s linear infinite;
}

.container {
max-width:400px;
width:100%;
margin:0 auto;
position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
background:#F9F9F9;
padding:25px;
margin:50px 0;
}

#contact h3 {
color: #000000;
display: block;
font-size: 30px;
font-weight: 400;
}

#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}

fieldset {
border: medium none !important;
margin: 0 -10px 10px;
min-width: 100%;
padding: 0;
width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}

#contact textarea {
height:100px;
max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#0CF;
color:#FFF;
margin:0 0 5px;
padding:10px;
font-size:15px;
}

#contact button[type="submit"]:hover {
background:#000aff;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"/>

<title> Memento Mori </title>

</head>
<body class="fade-in">
<div class"expo">
<h1>Memento Mori</h1>
<h2>a reminder of death</h2>
</div>


</body> 
<footer>
<div class="stars"></div>
<div class="twinkling"></div>
</footer>
</html>

 .stars, .twinkling {
      position:absolute;
      top:100px; /*Updated for better positioning*/
      left:0;
      right:0;
      bottom:0;
      width:auto;
      height:1200px;
      display:block;
    }

here you have given top 0 thats why its covering all your text you need to give top as per your requirement like i have given in this snippet

 .stars, .twinkling {
      position:absolute;
      top:100px;
      left:0;
      right:0;
      bottom:0;
      width:auto;
      height:1200px;
      display:block;
    }
hope you got your answer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a key-value pair string into an array in PHP: A comprehensive guide

When the checkbox is selected, I will extract the values listed below: attribute_value:samsung, attribute_id:1, spec_group_id:2, prod_id:1 To convert the above string into an array format and obtain a single array outside of the loop. Therefore, if I wa ...

phphtml

The functionality of Div.Show is not consistent while the code is running, yet it operates smoothly when the code is

When I trigger a save action, a hidden div is supposed to appear. The structure of this div is like so: <div class="Working" style="display: none;">Message</div> As part of the save process in my code, the following logic is implemented: fun ...

javascriptcssajaxjquery

What is the best way to adjust the width of floating divs to completely fill the space they occupy?

On the first picture, there are six equal divs displayed. As the screen size increases, the width of the divs also grows to fill up their space, like a table cell or another div. If there is enough space in the first row to accommodate the fourth div, it s ...

javascriptjqueryhtmlcss

Calibrating height using CSS

Within my HTML document, I have the following structure: <div id="content"> <div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset class ...

csshtmlheightfieldset

Retrieving the value of the href variable from the current page using the $_GET method

I am facing an issue with a table that opens when a button is clicked in response to an ajax call. The entire website operates based on ajax calls. The problem arises because the table has numerous rows, so I decided to implement pagination as a solution. ...

phphtmlajax

Struggle of UL vs. LI Designs

Currently, I am tackling a web development project that entails a CSS file known as Style.css. Inside this file, a styling series is outlined for UL and LI elements, which have been implemented across various parts and sections of the project. The setup lo ...

htmlcss

What is the reason that padding is excluded from the height calculation of a display flex container?

.wrap { display: flex; flex-flow: column; } .row { display: flex; flex-flow: row wrap; background: yellow; } group label { padding: 1em; background: red; } <div class='wrap'> <h2> Header </h2> <div class=& ...

htmlcss

Original text: Default SVG styleRewritten text

Could you please provide information on the default style of SVG? For instance, what is the default font used in a new SVG document? Is this specified in the SVG specifications? <svg><text x="10" y="10">Hello</text></svg> Thank yo ...

csssvgspecifications

Experiencing difficulties in arranging Bootstrap columns based on media queries

I am creating a layout for a website that requires 4 columns. When the screen is in desktop mode or wider than tablet width, it should show all 4 columns with the outer 2 being used for padding only. However, in mobile mode, the outer 2 columns should di ...

cssbootstrap-4media-queriesxhtml

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Boost Page Text Size Using CSS

Possible Duplicate: Allowing users to adjust font size on a webpage My goal is to create webpages where users can click an image to increase the font size of all content. Is this achievable? If so, how would I go about implementing it? I am aware that ...

css

Organize the menu in Angular by sorting it alphabetically

I am currently exploring a way to organize the buttons inside the menu in alphabetical order using a function in the TypeScript file. Please see the code snippet below, which utilizes Angular Material. <mat-menu #menu3="matMenu" [overlapTrig ...

javascripthtmlangulartypescript

Resize a div within another div using overflow scroll and centering techniques

Currently, I am working on implementing a small feature but am facing difficulties with the scroll functionality. My goal is to zoom in on a specific div by scaling it using CSS: transform: scale(X,Y) The issue I am encountering lies in determining the c ...

javascriptjqueryhtmlcss

Receiving an unexpected value from the input attribute

Currently, I am facing a challenge in retrieving data from another component by using the selector in the HTML file of the parent component. Here is how I implemented it: <app-graphs [module]="module" hidden></app-graphs> In the chi ...

htmlangulartypescriptinputparent-child

Creating a custom loading spinner using HTML and CSS

I am looking to create a spinner using just the <input> element. The only element I can utilize is <input type="text" placeholder="Select Date" class="sel1" /> How can I use CSS to implement a basic spinner in this scenario? ...

javascriptjqueryhtmlcss

The arrangement of objects looks distinct once it is shared with the public

After developing a website and debugging it in Visual Studio using the "view in browser" feature, I deemed it ready for deployment onto our test server. However, upon checking the page from the server's address, certain elements appeared differently t ...

htmlcssasp.netbootstrap-modal

What is the best way to add a directional hover effect to a filter?

I am attempting to implement a sliding hover filter effect on an image. The original filter I have is set to grayscale(1). What I want to achieve is for the filter to transition directionally instead of having a slider overlay effect, in order to change i ...

csshovercss-filters

Retrieve information from the identical registration form in Codeigniter

https://i.stack.imgur.com/FWTIf.png The student registration form includes fields for father and mother information in the student table, while guardian information is stored in a separate guardians table. When selecting "Father" in the "Guardian Informat ...

phphtmlmysqlformscodeigniter

What is the process for accessing my PayPal Sandbox account?

I'm having trouble logging into my SandBox Account since they updated the menu. The old steps mentioned in this post Can't login to paypal sandbox no longer seem to work. Could someone please provide me with detailed, step-by-step instructions o ...

javascripthtmltypescriptpaypale-commerce

The Inconsistency of Bootstrap 5 Grid with 12-Column Widths

Is it correct to say that a bootstrap grid is made up of 12 columns horizontally (as per the Grid System Documentation])? If I define two columns within a fluid container (always with a width of 100%), the first column as col-md-3, and the second as col-md ...

htmlcssbootstrap-5bootstrap-grid