1

i am trying to turn the background image of a div into a slideshow but obviously do not know how to, any help would be appreciated.

HTML:

 <div class = 'Header'>
        <h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
        <input type = 'button' class = 'Book_Here' value = 'Book Here'>
    </div>

CSS: 

.Header {
    background-image: url(../IMG/Header.png);
    background-size: cover;
    width: 100%;
    height: 720px;
    text-align: center;
}

.Header h3 {
    padding-top: 200px;
    color: #ffffff;
    font-size: 50pt;
    font-style: italic;
    margin-bottom: 50px;
}
Jackb2296
  • 23
  • 1
  • 6

1 Answers1

0

Here's an example of a slideshow using the <img> HTML tag, instead of linking the image through CSS. This will require you to put an <img> tag in your .header <div> and link that tag to the first image in your slideshow img1.jpg

HTML:

<html>
    <head>
        <script src="slideshow.js" type="text/javascript"></script>
        <script>
            window.onload = auto;
        </script>
    </head>
    <body>
        <h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
        <input type = 'button' class = 'Book_Here' value = 'Book Here'>
        <img class=".header" src="../IMG/Header.png" name="header">
    </body>
</html>

CSS:

.book_here, h3 {
    position: absolute;
}

JavaScript:

// Change Slide in Slideshow

var  Image_Number = 0;

function change_image (num) {

var image = ["../IMG/Header.png", "../IMG/img2.png", "../IMG/img3.png"];
var Image_Length = image.length - 1;

console.log(Image_Length);

Image_Number = Image_Number + num;
console.log(Image_Number);

if (Image_Number > Image_Length) {

    Image_Number = 0;        
}

if (Image_Number < 0) {

    Image_Number = Image_Length;
}

document.header.src=image[Image_Number];

return false;
}

// Change Slide Automatically - Interval Function

function auto () {

setInterval(function(){

    change_image(1);

}, 3000);
}
123
  • 8,733
  • 14
  • 57
  • 99
  • Well on the website i also have text and a button on top of the image which is why i chose to make it the background of the div instead of using that approach, unless you can suggest a work around, the link to said website is http://preview.impactdesigns-ad.com/HBP – Jackb2296 May 03 '15 at 17:32
  • You could still use the `` tag and make the title and button `position: absolute` so they appear on top of the image. – 123 May 03 '15 at 20:29
  • I made some edits to my answer that should make it do what you want using the `` tag. – 123 May 03 '15 at 21:04
  • Thanks, how do i make one image fade from one to another – Jackb2296 May 07 '15 at 09:51
  • I would take a look at this http://stackoverflow.com/questions/5104053/fade-effect-using-javascript-no-jquery – 123 May 07 '15 at 19:56
  • Have you had any luck with this? – 123 Jun 02 '15 at 16:11