Rotating Div Background Image?

JavaScript
1

Hey folks,

Currently I have a div about 600px high and spans the entire width of the page. What I’m trying to do is have the background image of said div rotate every X seconds. An example of something similar to what I’m trying to achieve can be found on http://airbnb.com. Currently, what I’m doing is essentially creating 4 different empty divs and using jquery to loop between each one. Each of the divs have a different css background image on it. The reason I’m doing it as a background image is because I’m adding editable text in the middle of the div.

Right now I can get the background images to rotate and it spans the width of the page no problem (I use background-size: cover property), but another problem arises when I resize the browser. When I go to resize it, the image doesnt resize properly and creates the problem of horizontal scrolling to the right past the wrapper of the page.

Also, another problem with this approach is that I cannot directly place the text on top of the background image since the background image is on 4 separate divs, so I need to use negative margins on the text to get it over the images.

I know there is probably a better, much more efficient way to do it, but I can’t seem to find it, so any help would be greatly appreciated.

Thanks,

Elementax

2

Not too sure how to help you with the size issue, but instead of looping thru divs, why not just change the background image with jQuery’s .css()? You could just swap the images out:
$(‘div’).css(“background-image”, “url(path/to/image.png)”);

3

Ye, at the moment that is what I’m using it, as it is as close as I can seem to get, however the only problem with simply changing background-image is that I can’t fade to the next picture. I know it’s only a subtle little effect to fade, but it makes a whole of difference than simply just changing the picture out after X seconds

Elementax