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:

Code:

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

roger64 · 06-10-2013, 06:01 AM

Quote:

Originally Posted by AlPe

I guess the "trick" you look for is due to the following two CSS declarations:

Code:

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:

Code:

<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

Quote:

Originally Posted by AlPe

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:

Code:

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

in the <head> of Section0001.xhtml.

Shame on me

Soooooo Eeeeeaaaaassssyyyyy!!!

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

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 : https://www.mobileread.com/forums/sho...d.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

06-10-2013, 03:39 AM	#1
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Catalogue using background images 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? Last edited by roger64; 06-10-2013 at 04:32 AM.

06-10-2013, 05:35 AM	#2
AlPe Digital Amanuensis Posts: 727 Karma: 1446357 Join Date: Dec 2011 Location: Turin, Italy Device: Several eReaders and tablets	I guess the "trick" you look for is due to the following two CSS declarations: Code: div.fr2 {float:none;height:0cm;text-align:left} ... img.imgChant {float:none;width:auto}

06-10-2013, 07:42 AM	#4
AlPe Digital Amanuensis Posts: 727 Karma: 1446357 Join Date: Dec 2011 Location: Turin, Italy Device: Several eReaders and tablets	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: Code: <link href="../Styles/Style0001.css" type="text/css" charset="UTF-8" rel="stylesheet"/> in the <head> of Section0001.xhtml.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Removing background images from pdf to epub	maurelioc	Conversion	6	03-30-2021 04:40 AM
Altering HTML Script To Properly Display Background Images In ADE Ereaders.	Turk.Turkleton	Sigil	16	09-25-2012 12:34 PM
dimensions and resolution of background images in epubs	Derek R	ePub	2	02-16-2012 04:44 PM
title page & background images	Nate the great	ePub	13	07-28-2009 04:38 PM
Pdf background darker than LRF/RTF background	LOL2005	Sony Reader	2	10-23-2007 11:00 AM

06-10-2013, 08:34 AM	#6
AlPe Digital Amanuensis Posts: 727 Karma: 1446357 Join Date: Dec 2011 Location: Turin, Italy Device: Several eReaders and tablets	Sure, no problem. Try using SVG instead of that XHTML+CSS combination.

06-10-2013, 09:23 AM	#8
virg Junior Member Posts: 7 Karma: 10 Join Date: May 2013 Device: none	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 : https://www.mobileread.com/forums/sho...d.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

Advert

Advert