.wrapper {
position: relative;
}
.pseudo-img {
position:absolute;
top: 100px;
height:200px;
width: 200px;
background-color:black;
color:orangered;
z-index: 1;
}
.textArea {
position: absolute;
color:white;
top: 200px;
left: 80px;
height: 100px;
width:100px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="wrapper">
<div className="container">
<div class="pseudo-img">My animation</div>
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<p id="areaOfText">My text</p>
</div>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
Are you looking for something like this?
I think you by accident named the class .textarea instead of textArea give it a background-color and some content inside the p tag to see it clearly
I’m trying to move my in front my CSS animation background and set it below the buttons i tried adjusting the z-index of my text area and the animations, i gave an id to the text area and a and tried to modify that in CSS but none of this worked and it stills hidden back there, a I’m relative new and i don’t know what i have to do, this is my first post so please let me know if i did something wrong.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="container">
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<textarea id="areaOfText"></textarea>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
CSS:
.textArea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 4px;
background-color:black;
font-size: 16px;
resize: none;
z-index: -1;
position: relative;
}
.buttons{
position: absolute;
}
.elven_button {
background-color: springgreen;
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.elven_button:hover{
background-color: palegreen;
cursor:url("../Media/joke3.cur"), default;
}
.dwarf_button{
background-color: rgb(187, 182, 182);
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.dwarf_button:hover{
background-color: rgb(248, 248, 247);
cursor:url("akary_Hammer.cur"),default;
}
.human_button{
background-color: chocolate;
transition: background-color.5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.human_button:hover{
background-color: wheat;
cursor: url("humanD1.cur"),default;
}
.textarea {
position: relative;
top: 40px; left: 40px;
}
.container{
position: relative;
display: block;
width: 100%;
max-width: 400px;
height: 280px;
margin: 0 auto;
z-index: 2;
}
.img{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: fade 24s infinite;
animation: fade 24s infinite;
}
#img1{
animation-delay: 0s;
background-image: url('city1.jpg');
}
#img2{
background-image: url('human2.jpg');
animation-delay: 8s;
}
#img3{
background-image: url('morgoth_ungoliath.jpg');
animation-delay: 16s;
}
@-webkit-keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Yes! now is in front the CSS, the size seems to be small but i think that i can code that, thank you so much
thanks i didn’t see that mistake but the text area is still behind the CSS animation background
yes, I saw the link again and if you look at the post I already added the changes you marked correctly but I still have the same problem, I noticed that the text area can be seen but only when the CSS executes the animation to change the background and then it hide again
