CODEWITHSUNDEEP
jqueryjquery-pluginscycle
Rob
Rob

Reputation: 31

jQuery.cycle change div background image

jQuery newbie!

I am having real trouble getting the Cycle plugin to change the background image of a div rather than cycle through slides. My div has other content which I don't want to change.

Is there another plugin out there that I should be using to achieve this? Help most appreciated on this.

Upvotes: 1

Views: 7275

Answers (2)

Petar Subotic
Petar Subotic

Reputation: 68

Simplifying the method Marshall recommended: http://jsfiddle.net/petarsubotic/299Wr/

CSS

#wrapper {
position: absolute;
overflow:hidden;
height: 333px; /* optional */
background: black; /* optional */
}
#content {
position:relative;
z-index:999;
float:left;
background: rgba(0, 0, 0, 0.8);  /* optional */
padding:1em;  /* optional */
margin: 1em;  /* optional */
color:white;  /* optional */
}
#bg_containers {
position:absolute;
}

HTML

<div id="wrapper">
<div id="content"> 
The background image behind this can be any size, so although it may not cover your entire screen in this case, you can make it cover as much or as little of the screen as you like. Just adjust the size of the #bg_containers, and of course, you can also have the background tile if you like as well.
</div>
<div id="bg_containers" >
<div><img src="http://www.australia.com/contentimages/about-landscapes-nature.jpg"/>    </div>
<div><img src="http://www.mtsu.edu/urban/images/urban1.jpg"/></div>
</div>
</div>

Upvotes: 1

Marshall &#198;on
Marshall &#198;on

Reputation: 407

This page should help you:

http://www.magneticwebworks.com/jquery-rotating-page-background/

Upvotes: 1

Related Questions