Altering HTML Script To Properly Display Background Images In ADE Ereaders.

[Turk.Turkleton]

I am in need of assistance in correcting some format errors. I'm new to this and have hit a bit of a wall on how to accomplish my goals. I'll try to include all relevant information without giving a bunch of trash to sort through. If you'll let me know what info I need to supply, I will try to provide it quickly.

I've created an Epub file in Sigil that contains background images with text on top of them. The images display properly in the Sigil viewer, Kindle Previewer, and Calibre Viewer. They do not display properly in the Nook Color or the Adobe Digital Edition Viewer. I know the Nook uses ADE and it displays the files differently for some reason, but I can't track down any information about how to account for the differences and correct them. Here's what they look like:

Sigil viewer showing text over image:
http://imgur.com/mnxZW
http://imgur.com/kZxTH

Nook for PC: image is not a background image:
http://imgur.com/SDV1g
http://imgur.com/Ud49I

1st pic:

span.sgc-3 {position:absolute;z-index:-2;margin-left:24px; margin-top:19px;width:664px;height:374px}

<p class="MsoNormal"><span class="sgc-3"><img alt="" height="374" src="../Images/image002.jpg" width="664" /></span></p>

2nd pic:

span.sgc-7 {position:absolute;z-index:-1;left:0px; margin-left:180px;margin-top:0px;width:307px;height:453px}

<p class="MsoNormal sgc-2">10.<span class="sgc-4">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="sgc-6">Run to the southwest of Polo to find the crafting area and complete 2 craft quests.</span><span class="sgc-7"><img alt="" height="453" src="../Images/image004.jpg" width="307" /></span></p>

The negative Z value in Sigil puts the image in the background for all ereaders that aren't ADE. I'm not sure how to fix this problem and 2 days of my poorly performed Google-Fu has not revealed any answers.

If someone could point me in the right direction, or has a epub file that shows how to put the background image in correctly, I would really appreciate it.

Thanks,

Turk

[Toxaris]

If I remember correctly, z-index is not supported in ePUB2. Therefore it should not work on all ePUB2 readers. You might try the CSS property background-image. I don't know if that will work (haven't used it myself), but I think it should.

[Turk.Turkleton]

Thank you for replying. I'm just figuring these things out so any information is good information.

I'll look into the Epub2 idea. I didn't know there was a different Epub format so I'll probably have a thousand more questions.

Thanks,

Turk

[Toxaris]

The specifications for the ePUB format is created by the IDPF. At the moment there are two versions, 2 and 3. Version 2 is the most used version by far. Version 3 adds a lot of functionality, but is hardly used (outside iBooks).

[mrmikel]

Even if you succeed, what you are trying to accomplish will not be very useable on most e-ink readers. They can display, if memory serves, 16 shades of gray.

Computers can generally display 16.7 million colors. Apparently ipads are similar. So it will be much more useable on these devices.

[Turk.Turkleton]

You definitely put on the right path, thank you for that.

I started altering the searches I was doing and was able to determine that this is much closer to the effect I was going for, and it looks the same in Nook for PC viewer as it does in the calibre viewer:

body
{
background-image:url('../Images/image002.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

The only problem with this is that it puts the image on every page of the ebook. My brain is fried at the moment, I'll have to begin anew later, but, I kinda/sorta know which direction to head now.

I'll look into the IDPF that you mentioned, but I'm wondering if I can just create some sort of command line that will let me drop the image anywhere in the epub one time and not have it repeat on every page, just the pages I wanted to put it into.

I have no idea if that would be faster or not, I have quite a few different images I would like to drop into the background.

I hope that makes sense, I'm too tired to think about at the moment.

Thanks Again!

Turk

[Toxaris]

That is possible. You define a new background image in each new HTML file. If you want the image to differ between pages, you need to limit the pages to a new HTML file.

[theducks]

Originally Posted by mrmikel

Even if you succeed, what you are trying to accomplish will not be very useable on most e-ink readers. They can display, if memory serves, 16 shades of gray.

Computers can generally display 16.7 million colors. Apparently ipads are similar. So it will be much more useable on these devices.

Hanlin V3's were 4 shades (still being made when I bought my V5), the V3+ caught up
So there are probably a LOT of 4bit e-Ink out there

[Turk.Turkleton]

Originally Posted by mrmikel

Even if you succeed, what you are trying to accomplish will not be very useable on most e-ink readers. They can display, if memory serves, 16 shades of gray.

Computers can generally display 16.7 million colors. Apparently ipads are similar. So it will be much more useable on these devices.

Thanks for the tip, I'll look into which ones I can use with color and see if I can turn the rest into a more black and white friendly format.

[Turk.Turkleton]

Originally Posted by Toxaris

That is possible. You define a new background image in each new HTML file. If you want the image to differ between pages, you need to limit the pages to a new HTML file.

I'm not sure what you mean when you say "new HTML file". Here is a tutorial I found and was reading last night after you told me what to look for:

Create Rich Layer Publicationshttp://www.ibm.com/developerworks/we...pub/index.html

This tutorial provides this script (is "script" the right term?):

div[epub|type="chapter"] {
background-image: url('childrens-book-swans.jpg'),
url('childrens-book-flowers.jpg');
background-position: 100% 50%, bottom center;
background-size: 50% auto, auto auto;
background-repeat: no-repeat, repeat-x;
background-color: #fdefc2;

When you say "New HTML" are you meaning a whole new epub file and then combining a bunch of epubs into one larger epub, or adding a 2nd pic similar to the way this tutorial does with the "url('childrens-book-flowers.jpg')" line?

Sorry for my ignorance,

Turk

[Toxaris]

No. An epub is a collection of one or more xhtml files and accompanied files. Each xhtml file will start on a new page. Usually a chapter is a xhtml file.

An epub is a zip file.

[theducks]

Originally Posted by Turk.Turkleton

I'm not sure what you mean when you say "new HTML file". Here is a tutorial I found and was reading last night after you told me what to look for:

Create Rich Layer Publicationshttp://www.ibm.com/developerworks/we...pub/index.html

This tutorial provides this script (is "script" the right term?):

div[epub|type="chapter"] {
background-image: url('childrens-book-swans.jpg'),
url('childrens-book-flowers.jpg');
background-position: 100% 50%, bottom center;
background-size: 50% auto, auto auto;
background-repeat: no-repeat, repeat-x;
background-color: #fdefc2;

When you say "New HTML" are you meaning a whole new epub file and then combining a bunch of epubs into one larger epub, or adding a 2nd pic similar to the way this tutorial does with the "url('childrens-book-flowers.jpg')" line?

Sorry for my ignorance,

Turk

Note: That document is discussing EPUB3
Most of our devices are still using (Stuck at forever) EPUB2. If you are making an EPUB3 (Sigil is currently creating EPUB2), you are going to be ignoring a lot of consumers )

[Tex2002ans]

Do you have any previous knowledge of HTML/CSS?

Is there any specific reason you are choosing to use the EPUB format?

Is there any specific reason you are using Sigil to create this document?

What devices do you plan on having this document read on?

Perhaps you are using the wrong format and the wrong tools for the job.

[Turk.Turkleton]

Originally Posted by Tex2002ans

Do you have any previous knowledge of HTML/CSS?

Is there any specific reason you are choosing to use the EPUB format?

Is there any specific reason you are using Sigil to create this document?

What devices do you plan on having this document read on?

Perhaps you are using the wrong format and the wrong tools for the job.

1. I've taken 1 class in college that covered the basics, but I've not had anything I would call "real" experience with HTML/CSS and I'm trying to learn as I go.

2. I'm using Epub because I thought it was one style all Ereaders could use. I've learned quite a bit over the past couple of days and I'll have to figure out where to go from here.

3. Sigil seemed like the best free resource to create Epub.

4. I would like to have it readable on any of the popular Ereaders. Nook, Nook Color, Kindle, Kindle Fire, and the Ipad. I would like to create professional looking ebooks for some Ideas I've had that are very heavy on images and not just text and format that normal ebook tutorials illustrate.

5. With these answers which tools would you suggest?

Thanks!

Turk

[Turk.Turkleton]

Originally Posted by Toxaris

No. An epub is a collection of one or more xhtml files and accompanied files. Each xhtml file will start on a new page. Usually a chapter is a xhtml file.

An epub is a zip file.

Thanks for the clarification. I'll see if I can figure it out in Sigil, there have been a lot of websites that mention using chapters, I'll go back over everything I've found and see what I can create.

Thanks Again!

Turk