I wrote HTML source for a slideshow on a website. I want the slideshow to be in the background (i.e full screen and behind the text) but even with my max-width, etc. set at 100% it doesn't stay full screen and I have no idea how to make sure it stays behind everything else. Here is the main_rjfe.html file:
<!DOCTYPE html> <html> <head> <title>R. J. Farah Engineering</title> <link rel="stylesheet" type="text/css" href="main_rjfe.css"> </head> <body> <div class="box fade-in logo"> <img src="logo.png" style="width:270px;height:128px;"> </div> <div class="menu_box fade-in menu"> <div id="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">contact us</a></li> </ul> </div> </div> <div class="css-slideshow"> <figure> <img src="img1.jpg" width="495" height="370" /> <figcaption><strong>CSS3:</strong> CSS3 delivers a...</figcaption> </figure> <figure> <img src="img2.jpg" width="495" height="370" /> <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption> </figure> <figure> <img src="img3.jpg" width="495" height="370" /> <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption> </figure> </div> </body> </html> And here is my CSS file:
/*Slideshow*/ .css-slideshow{ position: absolute; max-width: 100%; height: auto; margin: auto; } .css-slideshow figure{ margin: 0; position: absolute; } .css-slideshow figcaption{ position: absolute; top: 0; color: #fff; background: rgba(0,0,0, .3); font-size: .8em; padding: 8px 12px; opacity: 0; transition: opacity .5s; } .css-slideshow:hover figure figcaption{ transition: opacity .5s; opacity: 1; } .css-slideshow figure{ opacity:0; } figure:nth-child(1) { animation: xfade 18s 12s infinite; } figure:nth-child(2) { animation: xfade 18s 6s infinite; } figure:nth-child(3) { animation: xfade 18s 0s infinite; } @keyframes xfade{ 0%{ opacity: 0; } 32% { opacity:1; } 33%{ opacity: 0; } 98% { opacity:0; } 100% { opacity:1; } } There is more in the .css file, but the StackOverflow questions guidelines say to put only the code that I think is causing the problem. If you need the rest of the file, comment and I will update the question. Thanks!!
