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

**TurtleWolf** · Mar 21, 2011 08:09

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.

Code:

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

In the HTML

Code:

<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>

**paul_wilkins** · Mar 21, 2011 16:58

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.

**TurtleWolf** · Mar 21, 2011 17:57

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

**paul_wilkins** · Mar 21, 2011 18:01

Originally Posted by TurtleWolf

Thank you so much Paul!
At this point I can try a "period" versus a "hash mark" and see which gives me the result I am looking for, but could anyone help me clarify the use difference of each?

Those are CSS selectors. The period is for class selector, whereas the # is for an id selector.

Originally Posted by TurtleWolf

And I am wanting each page to have it's own full background.

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:

Code css:

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

**TurtleWolf** · Mar 27, 2011 16:14

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 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.

User Tag List

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

Thread Tools

Display

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

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions