View Full Version : Catalogue using background images


roger64
06-10-2013, 03:39 AM
Hi

This puzzles me because I do not know how to reproduce it on a new EPUB.
http://webrealis.net/ebook/monLivre.epub

This is a link that has been already published on a MobileRead thread. It's an EPUB containing a catalogue advertising 40 fullscreen images. Each image is in the background and has some text overwritten. Mind, the text is not written within the image, it's just overwritten, which makes it very convenient when you wish to modify something on the text.

I had a look at the EPUB. All looks plain and sensible. However, hard as I try, I do not know how to modify and insert these kind of images as background in an EPUB and what's more surprising, I cannot find any clue in this EPUB itself. The image looks as usual, the style-sheet looks as usual.

Would a Sherlock Holmes have a look at it and provide a working solution, say using Sigil?
Where is the trick?

AlPe
06-10-2013, 05:35 AM
I guess the "trick" you look for is due to the following two CSS declarations:


div.fr2 {float:none;height:0cm;text-align:left}
...
img.imgChant {float:none;width:auto}

roger64
06-10-2013, 06:01 AM
I guess the "trick" you look for is due to the following two CSS declarations:


div.fr2 {float:none;height:0cm;text-align:left}
...
img.imgChant {float:none;width:auto}


Thanks for looking at this.

I spotted them indeed. But I could not reproduce an EPUB with background images using these two above classes. What happened was that the text was displayed not over the image but after it. Why a plain {float:none} would make an image stand in the background?

EDIT: Doh! maybe it's the underestimated - by me - height:0, which did this?
I try again. Failed.

AlPe
06-10-2013, 07:42 AM
Please observe that, in the EPUB file you attached, the XHTML file does not have the CSS inclusion, just a @page directive. Add it and see the result.

EDIT: for clarity, add:


<link href="../Styles/Style0001.css" type="text/css" charset="UTF-8" rel="stylesheet"/>


in the <head> of Section0001.xhtml.

roger64
06-10-2013, 08:30 AM
Please observe that, in the EPUB file you attached, the XHTML file does not have the CSS inclusion, just a @page directive. Add it and see the result.

EDIT: for clarity, add:


<link href="../Styles/Style0001.css" type="text/css" charset="UTF-8" rel="stylesheet"/>


in the <head> of Section0001.xhtml.

Shame on me :smack:
Soooooo Eeeeeaaaaassssyyyyy!!! :2thumbsup

It's now OK. Thanks a lot. Indeed this seems quite a trivial task to do.
:thanks:

EDIT: it displays well on Sigil, with calibre ebook-viewer, but NOT in ADE 1.7. Aaarg!
The reference catalogue (monLivre), on the contrary, displays well with ADE 1.7. There must be a small hitch somewhere.

AlPe
06-10-2013, 08:34 AM
Sure, no problem.

Try using SVG instead of that XHTML+CSS combination.

roger64
06-10-2013, 08:56 AM
This last one is finally good also on ADE 1.7

I put it for the record. I will also try with a SVG wrapper. Thanks again.

virg
06-10-2013, 09:23 AM
Hello,

I explained the solution I found for this using of pictures (the first vesion of this catalogue) : you don't have to do your picture at the top of your page : http://www.mobileread.com/forums/showthread.php?t=212210 in the second paragraphe.
I used the amanuensis manual to integrate pictures and text in the same place.
It's not a real background image
I don't try to use background-image in css.

Bye