How can I change the background image of each page in the JQuery booklet plugin?

JavaScript
1

Theoretically I think I understand it, but practically I must be doing something wrong in the syntax. I am still really new to JavaScript in general. I am assigning each of the (page) div’s it’s own id, I think I am getting that part right, and then I want to assign each of them a background image in the C.S.S… But I am not sure how I should do this. does the statement start with a “.” or “#”, and should it go in or out of .b-loads {parameters?}

in my C.S.S.


 .booklet .b-load  {text-align:center; 
 .cover {background-image url(images\\00c.png)}
 #genesis01n0001 {background-image url(images\\00c.png)}}

In the HTML


<body>
<div id="mybook">
 <div class="b-load">
 <div id="cover">
 <h1>The Old Testament!</h1>
 </div>
 <div id="genesis01n0001"> 
 <h3>In the beginning God created the heaven and the earth.</h3>
 </div>
2

Do you want the background image of all the pages to be the same?
Use .b-wrap

Do you want one image for the left page and a different image for the rght?
Use .b-wrap-left and .b-wrap-right

Do you want each page background to be different?
Use .b-page-0 .b-page-1 and so on.

3

Thank you so much Paul! and I love your “HAMster” signature!

4

Those are CSS selectors. The period is for class selector, whereas the # is for an [url=“http://reference.sitepoint.com/css/idselector”]id selector.

if each page is to have their own different background, you will want to use CSS to target each page individually so that you can give them the background they require.

For example:


.b-page-0 { background: url(images/someImage.jpg); }
.b-page-1 { background: url(images/anotherImage.jpg); }
5

RSPLAK .b!tch slapped the ignorance out of my syntax, and Paul Wilkins told me where to stick it. But I couldn’t see what I was missing until I used [URL=“http://chrispederick.com/work/web-developer/”]Chris Pederick’s developer bar to see the div structure being generated by Will’s booklet. The left and right page wrappers were hiding my custom backgrounds.