0

My HEADER element has a background image and I need to swap it to another image after a 3 second delay, I have looked all over the internet and I cannot find a solution! I have tried CSS3 and Jquery and I just cant get it to work.

Because of the way the website is built, it has to be the background image of the element that changes and not a nested Div within the HEADER element.

--- SOLVED / SOLUTION ---

JS

 $(document).ready(function() {
      $("header").delay(5000).queue(function() {
          $(this).css({
              "background-image": "url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"
          });
      });
  });

CSS

header {
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    -o-transition:all 1s ease-in;
    -ms-transition:all 1s ease-in;
    transition:all 1s ease-in;
}
Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
Brad Fletcher
  • 3,547
  • 3
  • 27
  • 42

1 Answers1

0

A similar question has been asked before - This should give you an answer

Change CSS background-image with different intervals via jQuery

Community
  • 1
  • 1
Chris
  • 453
  • 3
  • 15
  • This solution works perfectly but it doesn't fade between images. – Brad Fletcher Aug 20 '14 at 11:35
  • To fade image background colour use the following CSS on the element - Change the .2 to the duration of the fade: `-o-transition:background .2s ease-out, background .2s ease-in; -ms-transition:background .2s ease-out, background .2s ease-in; -moz-transition:background .2s ease-out, background .2s ease-in; -webkit-transition:color .2s ease-out, background .2s ease-in; transition:background .2s ease-out, background .2s ease-in;` – Chris Aug 20 '14 at 14:52