csshtmlcoda

animated background covers all of my text

my code: So i am working on a personal project and i found this animated background that is perfect for it from codepen and it won't let me see any of the titles or text i want to input. I want this background in the background and be able to write my website ontop. Would greatly appreciate your help this is my first time using this site!

* {
    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>

Solution

  • Welcome to stackoverlfow. I see, you've tried using z-index on .expo and heading. But I can't remember now if z-index works on position:relative;

    Solution:

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

    These z-index modification should work, because you are using position:absolute; for these classes