Hide content of a book while the book is closed

Question

I currently have this setup to a little seeking game I'm creating:

http://jsfiddle.net/eju6S/

I'm using turn.js to create a book effect.

Now I want the content of the book to be invisible while the book is closed -> the cover should have the same background as the page background.

It should then get revealed when the cover opens.

This would be easy with colors but I want to have a picture as background.

So ideally this line <div class="hard"> Cover </div> should ignore the content layer and directly display the background as its background.

I know this could be done by cutting the background image at the region and the size this div has and then add this as the background or by doing some jquery functions to hide the content while the cover is closed but I'm looking for a css only solution here.

Is this possible to do with css?

EDIT: Now I achieved what I wanted by simply putting the same background image to the divs with some offset:

http://jsfiddle.net/eju6S/3/

Now the question is: I want to have multiple of those "flipping books" on one page, will it cause some problems to have such a rather huge image loaded and used multiple times or doesn't this matter?

Answer 1

Try this if you want to hide the text on the cover or to hide the text on any page just use a negative text indent

#hard { background: #2b2b2b; text-indent:-9999px; }