I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a background with a color-alpha-color pattern, so when I place the images behind it, the fade effect will always be present.
https://i.stack.imgur.com/Ng9Ah.png
Now, my question is how can I position the images behind the background?
body {
text-align: center;
background-image: url("http://i.imgur.com/jBqKhtV.png");
background-repeat: no-repeat;
background-position: center 1.5%;
background-color: #141414
}
.logo {
position: absolute;
z-index: 11;
width: 247px;
top: 17px;
margin-left: -112px;
}
.headline {
display: inline-block;
margin-top: 220px;
}
h1 {
font-size: 10pt;
font-family: Lucida Sans;
color: grey;
font-style: italic;
font-weight: normal;
}
.underline {
width: 630px;
height: 1px;
background-color: white;
left: 0px;
right: 0px;
margin: auto;
top: 270px;
position: absolute;
z-index: 12
}
.navigation {
width: 630px;
height: 60px;
position: aboslute; /*typo fixed*/
z-index: 13;
left: 0px;
right: 0px;
margin: auto;
}
h2 {
margin-top: 30px;
color: white;
font-family: Lucida Sans;
font-size: 15pt;
float: left;
margin-left: 65px;
font-weight: normal;
}
.home {
margin-left: 68px;
}
.slideshow {
width: 1330px;
height: 630px;
position: absolute;
z-index: -5;
left: 0px;
right: 0px;
margin: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Home_Stylesheet.css">
</head>
<body>
<center>
<img src="http://i.imgur.com/DlXvHKb.png" class="logo">
</center>
<div class="headline">
<h1>Cyprus Griptape Manufacturers</h1>
</div>
<div class="underline"></div>
<div class="navigation">
<h2 class="home">Home</h2>
<h2>Store</h2>
<h2>About Us</h2>
<h2>Contact Us</h2>
</div>
<div class="slideshow">
</div>
</body>
</html>