SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Rotating Div Background Image?

    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. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •