Is there a way to make images on my website span the full width of the wrapper section, which accounts for 85% of the body?
This is the HTML for the images in question:
<div id="index_banner">
<img class="bottom" src="images/SPAWN IMAGE.png" alt="INDEX BANNER">
<img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" alt="INDEX BANNER 2">
</div>
And here is the CSS for those images:
#index_banner {
height: 360px;
position: relative;
}
#index_banner img {
position: absolute;
animation: cf4FadeInOut 15s;
-webkit-animation: cf4FadeInOut 15s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#index_banner img:nth-child(odd) {
-webkit-animation-delay: -8s;
animation-delay: 8s;
animation-timing-function:ease-in-out;
}
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:0;
}
30% {
opacity:0;
}
40%{
opacity:1;
}
75%{
opacity:1;
}
85%{
opacity:1;
}
100% {
opacity:0;
}
}
@keyframes cf4FadeInOut {
0% {
opacity:0;
}
30% {
opacity:0;
}
40%{
opacity:1;
}
75%{
opacity:1;
}
85%{
opacity:1;
}
100% {
opacity:0;
}
}