In the following source code,the content area is displayed below the background image but i want the content area to be displayed inside the background image .how to do it?
and i have attached the image which i got as output in which the content area is displayed below background image but i want content area inside the background image.how to do it?
Following is my source code:
<html> <head> <title>SlideShow</title> <style> #wrapper {width: 900px; margin:0 auto; background-color:#00FF00; } #container { height:auto; margin:0 auto; padding:0 0 20px; width:751px; background-color:#00FFFF;}
#slideshow img { -webkit-border-radius: 20px; -khtml-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; box-shadow: 2px 2px 5px #888888; } </style> <script> var image1 = new Image(); image1.src ="Images/first.jpg"; var image2 = new Image(); image2.src = "Images/second.jpg"; script> </head> <body> <div id="wrapper"> <div id="slideshow"> <img src="Images/first.jpg" alt="" name="MySlide" width=900; height=200 /> <div id="container" style="height: 104px"> <h1>It is the Content Area</h1> </div> </div> </div> <script> var step=1 function SlideShow() { if(!document.images) return document.images.MySlide.src=eval("image"+step+".src") if(step<4) step++ else step=1 setTimeout("SlideShow()",3000) } SlideShow() script> </body> </html>
Sanjay KumarPosted Dec 14, 2013, 4:06 AM
try this
http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
http://jsfiddle.net/4TZ29/6/