Adding background color in TurnJS

Question

I have experienced problem I have never faced before and even googling it did not help. I have basic code from the official page of script TurnJS, which is the problem I have with.

<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>

This works as it should but is has transparent background so when you have any text on pages it overlays themselves so you cannot read the text properly.

When I add

#flipbook div{
    background: white;
}

It somehow breaks. Pages skew when hovered etc. I cannot insert a jsfiddle example because the link for turnjs script is not https and I am not allowed to insert http links. And here it shows me error in code. The skewed page is shown on image below. Does someone know how to add a bg-colorto that flipbook? I would aprreciate any comments.

Answer 1

You can add another class to your pages which specifies a background colour:

<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="pageStyle"> Page 1 </div>
<div class="pageStyle"> Page 2 </div>
<div class="pageStyle"> Page 3 </div>
...

And then specify everything you need in that class. The other method is to load background images for each page. This is generally how a magazine would be created in TurnJS as it's easier to automate. Although I just went over their docs looking for this (I know it works, I've done it before) and couldn't find much about it.