javascript - fade background image of div, and text within it -

using jquery, i'd cycle through 3 different background-images , 3 sets of text within "box", fading next every 6 seconds.

css:

.box { background: url(/filepath/to/image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

html:

<div class="box"> <h1>headline</h1> <h2>sub-text</h2> </div> 

what's best way this?

you can't fade between background images of same element. suggestion insert 3 (or many want, really) images, positioned absolutely on top of each other , fade between those.

you can same text elements you'd fade through, or construct series of divs containing combination of both.

actually, there's infinite number of approaches take achieve effect you're describing, trying fade background-image ain't 1 of them.

<div class="box">     <div class="slide bg1">         <!-- content -->     </div>     <div class="slide bg2">         <!-- content -->     </div>     <div class="slide bg3">         <!-- content -->     </div> </div> <!-- end .box --> 

style...

.box {     position: relative; /* set relative keep containing .slide divs, ahem, relative */ } .slide {     position: absolute;     top: 0px;     left: 0px; } .bg1 { /* there more elegant ways of targeting individual slides, i'm being lazy... */     background-image: src('/dir/img.jpg'); } .bg2{} .bg3{} /* etc, etc... */ 

fading between child divs not allow change appearance of background-image, else might want fade (or else matter).

as javascript, there thousand , 1 resources out there covers this, i'll defer them (google it!).