CODEWITHSUNDEEP
jqueryhtmlcss
mkas
mkas

Reputation: 513

Background image rotation in a loop

I have daveloped with an image in background as follows:

body {
  width: 1000px;
  margin: 0 auto;
  background: url('/images/bg.jpg') top center no-repeat;
  background-attachment: scroll;
}

Image is 2000px width. I would like to rotate image background with three images bg1.jpg, bg2.jpg and bg3.jpg. Could you help me with finding easy solution to do it?

Upvotes: 0

Views: 551

Answers (2)

Léon Rodenburg
Léon Rodenburg

Reputation: 4894

You're probably better off by creating 3 divs that are positioned at 0, 0 and stretch the whole page. Put a background image in each of these divs.

<div id="bg1"></div>
<div id="bg2" style="display: none"></div>
<div id="bg3" style="display: none"></div>

Then you can use jQuery animation (or basically any image slider plugin) to change the background.

Upvotes: 0

MartijnCMT
MartijnCMT

Reputation: 69

Since you've posted this with jQuery, I'll assume a jQuery solution would be preferable.

How about this example using a jQuery plug-in: http://www.magneticwebworks.com/jquery-rotating-page-background/

Upvotes: 2

Related Questions