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.