0

I wanted to create a page with a fullscreen background image. I have a menubar on top - when hovering each button, the background image does change.

Now the transition is a little bit "hard" (in chrome it even is flickering somehow) - so i wanted to create a smooth transition when hovering a button.

onmouseover: fade the body background image to a new one

I know it is possible with JQuery, but sadly I can't get it to work. Help is very appreciated.

What I have currently is this: http://jsfiddle.net/3aDhL/

CSS

body {
font-family: 'Roboto', 'verdana';
color: black; 
background-color: #000000;
background: url(http://lorempixel.com/output/abstract-q-c-640-480-9.jpg) no-repeat center center fixed;
background-size: cover;
}

JScript

function swapNews(){    document.body.style.backgroundImage="url(http://lorempixel.com/output/abstract-q-c-640-480-2.jpg)";
}

function swapKurse(){   document.body.style.backgroundImage="url(http://lorempixel.com/output/abstract-q-c-640-480-10.jpg)";
}

function swapUberuns(){     document.body.style.backgroundImage="url(http://lorempixel.com/output/abstract-q-g-640-480-4.jpg)";
}

HTML

<div id="menu">
    <ul id="Navigation">
        <li><a href="#" onmouseover="swapNews()">NEWS</a></li>
        <li><a href="#" onmouseover="swapKurse()">KURSE</a></li>
        <li><a href="#" onmouseover="swapUberuns()">&Uuml;BER UNS</a></li>
    </ul>
</div>

Greetings from Switzerland

-Miro

MiroT.
  • 3
  • 1
  • Do you want jQuery only ? Because you can do it in CSS adding `transition: 0.2s all ease;` to your body. – thomas-hiron Feb 26 '14 at 12:24
  • 1
    If you want to do `smooth` while `image` `loading` then its not possible,Another way is to `preload` all `images` then enable your `mouseover()` and add ` transition: 0.5s all ease;` to your css. – ashbuilds Feb 26 '14 at 12:25
  • 1
    So the question is to implement the javascript code in jsfiddle using jQuery? – sabithpocker Feb 26 '14 at 12:32
  • thansk for the quick answers guys. i thought jquery was better, since css3 doesn't work in older IE versions. i tried the transition in css, and this works fine (thanks!) - but only in firefox and chrome, the IE8 i use to test doesn't work with this. – MiroT. Feb 26 '14 at 13:37

1 Answers1

0

I have added these CSS3(if CSS3 is an option for you) properties for the body tag in your JSFiddle:

transition-property: background;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0.2s;

Be sure to cache the images for best results.

Silviu Burcea
  • 5,103
  • 1
  • 29
  • 43
  • That worked very smooth, thanks for that! now the only problem i have is that it doesn't work in IE8 (thats why i thought to use jquery instead of css) - is there a workaround for the IE? – MiroT. Feb 26 '14 at 13:41
  • I am not aware of any workaround, but here are some google results: http://stackoverflow.com/questions/7933062/ie-9-css3-transition-effect-cheats http://stackoverflow.com/questions/6544162/imitate-css3-transition-in-ie – Silviu Burcea Feb 26 '14 at 13:49