I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, banner3, and banner4.jpg stored in the IMAGES/banner1.jpg folder.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});body
{
background-color: #808080;
}
p
{
!--
}
p.homeclassheader
{
font-weight: bold;
font-size: 35px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 150%;
text-align: center;
color: white;
text-shadow: 2px 2px 3px grey;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
header
{
text-align:center;
text-shadow: 2px 2px 3px grey;
color: silver;
padding: 20px 0px 0px 0px;
border-bottom: #808080;
position: fixed;
border-bottom: 2px solid #00FFF5;
top: -10;
height: 150px;
left: -10;
width: 105%;
z-index:5;
}
header a
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 5px grey;
font-weight: bold;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 100%;
color: white;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
hr {
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
header a:visited
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 3px grey;
color: silver;
}
article
{
}
article.homeclass
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: #393E46;
border-bottom: 2px solid #00FFF5;
border-top: 2px solid #00FFF5;
height: 350px;
float: left;
width: 75%;
max-width: 350px;
margin: 0 auto;
}
article.homeclass img
{
float: right;
margin-left: 30px;
margin-right: 25px;
margin-top: -15px;
margin-bottom: 0px;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-weight: bold;
font-size: 15px;
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: #393E46;
position: fixed;
top: 180;
width:99%;
z-index:5;
}
ul.menu li {
float: left;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid #00FFF5;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
ul.menu li a:hover {
background-color: #00ADB5;
color: black;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a:visited
{
text-decoration: none;
}
a:link
a:focus
a:hover
a:active
footer a
{
text-decoration: none;
text-align:center;
color: #00FFF5;
}
footer
{
text-align:center;
color: silver;
background-color: #393E46;
padding: 10px 0px 0px 0px;
border-bottom: #808080;
position: absolute;
bottom: 0px;
height: 25px;
border-top: 2px solid #00FFF5;
width: 105%;
}<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="CSS/styles.css">
<TITLE>Las Vegas | Home</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="JAVASCRIPT/scrolleffect.js"></script>
</HEAD>
<BODY>
<HEADER>
<style>
header {
background-image: url("IMAGES/banner1.jpg");
}
</style>
<a name="top"><H1>Las Vegas</H1></A>
</HEADER>
<div id="home"></div>
<br>
<br><br><br><br><br><br><hr><br><br>
<br>
<ARTICLE class="homeclass">
<p class="homeclassheader">Accommodation</p>
<hr>
<p class="class2">Hotel 1</p>
<p class="class2">Hotel 2</p>
<p class="class2">Hotel 3</p>
<hr>
</ARTICLE>
<br><br><br><br><br><br>
<FOOTER>
<NAV>
All Copyright reserved to Dylan 2017 ©<br>
</NAV>
</FOOTER>
</BODY>
</HTML>