Alex Rivera | Logout

Can I fade in a background image (CSS: background-image) with jQuery?

Asked 2011-09-06T11:59:37.793
74

I have a div element with text in it and a background image, which is set via the CSS property background-image. Is it possible to fade in the background image via jQuery?

div {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
  border: 1px solid #666;
  height: 10em;
}
<div>Text</div>

EDIT

I've made a fiddle exemplifying my scenario. Basically, this configures an initial background-image and a transition, and changes the background-image with jQuery. In my testing there is no animated transition between the two images.

EDIT2

My revised fiddle works!

jquery html css
Edit
Report

1 Answer

1

You can fade your background-image in various ways since Firefox 4 ...

Your CSS:

.box {
    background: #CCCCCC;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
    }
.box:hover {
    background: url(path/to/file.png) no-repeat #CCCCCC;
    }

Your XHTML:

<div class="box">
    Some Text …
</div>

And thats it.

answered 2012-12-16T22:03:42.033

Your Answer