How to fade changing background image

Question

I want to fade the images when I do this code       large-img   css  background-image    url    img         I ve tried putting fade in so many places   Thanks

User · Answer

Opacity serves your purpose   If so  try this       elem   css  opacity   0 3

User · Answer

Someone pointed me to this thread because I had this same issue but it didn t work for me  After hours of searching I found a solution using this - https   github com rewish jquery-bgswitcher readme  It has a few other options other than fade too

User · Answer

Can I offer an alternative solution   I had this same issue  and fade didn t work because it faded the entire element  not just the background  In my case the element was body  so I only wanted to fade the background   An elegant way to tackle this is to class the element and use CSS3 transition for the background    transition  background 0 5s linear   When you change the background  either with toggleClass or with your code      large-img   css  background-image    url    img       it will fade as defined by the class

User · Answer

This was the only reasonable thing I found to fade a background image    lt div id  foo  gt     lt  -- some content here -- gt   lt  div gt    Your CSS  now enhanced with CSS3 transition    foo     background-image  url a jpg     transition  background 1s linear      Now swap out the background  document getElementById  foo   style backgroundImage    url b jpg      Voil    it fades     Obvious disclaimer  if your browser doesn t support the CSS3 transition property  this won t work  In which case  the image will change without a transition  Given  lt 1  of your users  browser don t support CSS3  that s probably fine  Don t kid yourself  it s fine

User · Answer

This is probably what you wanted       elem   fadeTo  slow   0 3  function           this  css  background-image    url      img            fadeTo  slow   1     With a 1 second delay       elem   fadeTo  slow   0 3  function           this  css  background-image    url      img            delay 1000  fadeTo  slow   1

User · Answer

This may help   HTML   lt div id  textcontainer  gt               lt span id  sometext  gt This is some information  lt  span gt       lt div id  container  gt        lt  div gt   lt  div gt    CSS   textcontainer      position relative      border 1px solid  000      width  300px      height 300px     container      background-image  url  http   dcooper org gallery cf appicon jpg        width  100       height 100      sometext      position absolute      top 50       left 50       Js      container   css  opacity    1

User · Answer

Building on Rampant Creative Group s solution above  I was using jQuery to change the background image of the body tag   e g      body   css   background    url  wp-content themes opdemand img bg-sea jpg  fixed    background-size    100  100          body   css   background    url  wp-content themes opdemand img bg-trees jpg  fixed    background-size    100  100        I had a javascript timer that switched between the two statements   All I had to do to solve the issue of creating a fadeOut -  fadeIn effect was use Rampant Creative Group s suggestion and add  transition  background 1 5s linear    to my code  Now it fades out and in beautifully   Thanks Rampant Creative Group s and SoupEnvy for the edit

User · Answer

If your trying to fade the backgound image but leave the foreground text images you could use css to separate the background image into a new div and position it over the div containing the text images then fade the background div

[jquery] How to fade changing background image

Examples related to jquery

Examples related to background

Examples related to fade