Putting an Image in the background of a MOBI

[Cepheus]

Hi, any help on this would be greatly appreciated. I am currently working on a MOBI project. For the TOC we are attempting to fill the screen with a background image that text will sit over. I have used the following code but the attached screenshot shows that only a portion of the image shows up. I suspect it is because the image is in the 'div.toc tag' but for a Mobi iam not sure were else to place the image.

/* TOC */
div.toc {
text-align: center;
text-indent: 0;
max-height: 100%;
max-width: 100%;
margin-top: -1em;
padding-top: 0;
page-break-after: always;
background-image: url(../images/TOC_pageArt_ebook.jpg);
background-size: contain;
background-repeat: no-repeat;
}

[RbnJrg]

Please, could you be more specific? Mobi format can mean many things; are you referring to .azw3/.kf8 format or the old .mobi format (aka .kf7)? If you want to use an image as background in a .kf7 format, that is not possible; on the other hand, if you want to use it under .kf8/.azw3, then, no problem with that.

Read this:
https://www.mobileread.com/forums/sh...54&postcount=3

and this:
https://www.mobileread.com/forums/sh...2&postcount=12

and this:
https://www.mobileread.com/forums/sh...3&postcount=29

Take into account that the .KFX format has issues to hand background images.

[Hitch]

Originally Posted by RbnJrg

Please, could you be more specific? Mobi format can mean many things; are you referring to .azw3/.kf8 format or the old .mobi format (aka .kf7)? If you want to use an image as background in a .kf7 format, that is not possible; on the other hand, if you want to use it under .kf8/.azw3, then, no problem with that.

Read this:
https://www.mobileread.com/forums/sh...54&postcount=3

and this:
https://www.mobileread.com/forums/sh...2&postcount=12

and this:
https://www.mobileread.com/forums/sh...3&postcount=29

Take into account that the .KFX format has issues to hand background images.

As Ruben mentions, you need to clarify WHERE you are going to use that file. If you mean to sell the book at Amazon--that won't work. Yes, yes, others will chime in here and tell you that it will--but it will not work on the many older devices still in circulation. Amazon sold at least hundreds of thousands of older Kindles--most likely millions--and many of them are still in the Amazon ecosystem. You simply cannot float text atop an image in what's called "KF7 format," which is the format for all the older eInk devices--the K1, K2, early K3's, KKeyboards, and the DX, which sold VERY well to older readers and that only stopped selling a few short years ago.

So..are you using this personally, or in an environment where you control what devices it's read on, or are you planning to publish it at Amazon?

Hitch

[Cepheus]

Hi RbnJrg and Hitch, thanks so much for your replies. I really appreciate it. Sorry to respond so late but we've been trying to refine our code over the last couple of days. Just to further clarify I am referring to the kf8 format although it might be possible that customers purchase the Mobi and view it on earlier devices. We have gotten the code to work for kf8 although we need to test on other devices besides the Kinlde Fire. I'm assuming we will have problems with kf7 devices but at least its nice to know we can get it to work. If you're curious I put the code we used below for the image. Seems the tag 'background-size: contain' got the image to fill the div tag.

div.toc {
text-align: center;
text-indent: 0;
margin-top: -3em;
padding-top: 2em;
page-break-after: always;
background-image: url(../images/TOC_pageArt_ebook.jpg);
background-position: center top;
background-size: contain;
min-width: 100%;
min-height: 100%;
background-repeat: no-repeat;
}

Again, thanks very much for your replies. It definitely helped us out alot.

[JSWolf]

Originally Posted by Hitch

what's called "KF7 format," which is the format for all the older eInk devices--the K1, K2, early K3's, KKeyboards, and the DX, which sold VERY well to older readers and that only stopped selling a few short years ago.

Sorry, but Amazon does not call it KF7. It's still called Mobi format because that's what it is and always has been.

[JSWolf]

Originally Posted by Cepheus

Hi RbnJrg and Hitch, thanks so much for your replies. I really appreciate it. Sorry to respond so late but we've been trying to refine our code over the last couple of days. Just to further clarify I am referring to the kf8 format although it might be possible that customers purchase the Mobi and view it on earlier devices. We have gotten the code to work for kf8 although we need to test on other devices besides the Kinlde Fire. I'm assuming we will have problems with kf7 devices but at least its nice to know we can get it to work. If you're curious I put the code we used below for the image. Seems the tag 'background-size: contain' got the image to fill the div tag.

div.toc {
text-align: center;
text-indent: 0;
margin-top: -3em;
padding-top: 2em;
page-break-after: always;
background-image: url(../images/TOC_pageArt_ebook.jpg);
background-position: center top;
background-size: contain;
min-width: 100%;
min-height: 100%;
background-repeat: no-repeat;
}

Again, thanks very much for your replies. It definitely helped us out alot.

I hope you do realize that having a background image can make it harder to read. I hope you ditch the background image as it gives nothing useful to your book.

[Hitch]

Originally Posted by Cepheus

Hi RbnJrg and Hitch, thanks so much for your replies. I really appreciate it. Sorry to respond so late but we've been trying to refine our code over the last couple of days. Just to further clarify I am referring to the kf8 format although it might be possible that customers purchase the Mobi and view it on earlier devices. We have gotten the code to work for kf8 although we need to test on other devices besides the Kinlde Fire. I'm assuming we will have problems with kf7 devices but at least its nice to know we can get it to work. If you're curious I put the code we used below for the image. Seems the tag 'background-size: contain' got the image to fill the div tag.

div.toc {
text-align: center;
text-indent: 0;
margin-top: -3em;
padding-top: 2em;
page-break-after: always;
background-image: url(../images/TOC_pageArt_ebook.jpg);
background-position: center top;
background-size: contain;
min-width: 100%;
min-height: 100%;
background-repeat: no-repeat;
}

Again, thanks very much for your replies. It definitely helped us out alot.

Well...you can give it a try, but...we've all warned you about the KF7 devices, KCR, etc. If Amazon gets a complaint, they WILL discuss it with you and if they do, it's not going to be a "hey, that was really cool" convo. It'll be "remove it/fix it" discussion. But it's your book, so, give it a go. They'll send you a Kindle Quality Notice and while there are "warnings" or advisories, largely, they are Commands From On High.

Originally Posted by JSWolf

Sorry, but Amazon does not call it KF7. It's still called Mobi format because that's what it is and always has been.

Wolfie, stop being a d*ck about it. It's bloody confusing to try to have a conversation in which we all casually use the term "MOBI" and it can mean multiple things. It's faster and easier to use the same terms that EVERYBODY ELSE on the goddamn planet have used for the last half-decade now, EXCEPT YOU. I find most of your anachronistic eccentricities entertaining, Jon, but this one is wearing thin. And, in fact, may I point out that Amazon itself refers to "that' format as "MOBI 7?" So, what, saying "KF" instead of "MOBI" is unforgivable? Come on, Man, get over it. Move on. I'm your friend, but you're getting on my last nerve with this.

Originally Posted by JSWolf

I hope you do realize that having a background image can make it harder to read. I hope you ditch the background image as it gives nothing useful to your book.

Yes, well...I suspect that Amazon's sense of humor about this will only be matched by the results in the LITB, which should be FASCINATING, given that the "container" that this image will now be filling will be completely different than the devices themselves.

Some Gentle Reminders and Things to Think About:

Hmmm...wonder if anyone was thinking about that (the LITB) when they thought about the TOC?

For THAT matter, did anyone think about the fact that a tap, on an image, activates ZOOM, and NOT a link to go to a given location?

Honestly, this is one of those situations when I'd have a "Come to Jesus" conversation with a client and tell them that (h/t to Jurassic Park) just because you can do something (maybe) doesn't mean that you should do it.

I'm really looking forward to seeing the LITB and how the TOC works--or doesn't--with a background image.


Hitch

[JSWolf]

Originally Posted by Hitch

Honestly, this is one of those situations when I'd have a "Come to Jesus" conversation with a client and tell them that (h/t to Jurassic Park) just because you can do something (maybe) doesn't mean that you should do it.

I'm really looking forward to seeing the LITB and how the TOC works--or doesn't--with a background image.


Hitch

I've seen all kinds of nonsense done in eBooks. A recent thread discusses an eBook that has some of the text in a light blue color and it looks OK on a tablet or phone, but does not work on an eInk screen.

I was looking at an older Clive Cussler eBook last week where instead of putting the indents in the CSS, they were put in the HTML.

One of the worst eBooks I've seen is The Martian. The book itself is very good, but the eBook not so good. They decided to embed some of the worst fonts. They embedded Free Serif, Free Sans, and Free Mono and the problem is that those fonts are just very very light and are horrible on eInk.

[RbnJrg]

Originally Posted by Cepheus

... I'm assuming we will have problems with kf7 devices but at least its nice to know we can get it to work.

With KF7 devices you can't use any image as background. So, loose your hopes in that sense.

If you're curious I put the code we used below for the image. Seems the tag 'background-size: contain' got the image to fill the div tag.

Well, since we can't watch what is the image you are using as background, maybe the property "background-size: contain" is not the properly in this case. Maybe you want to use a background image as border, guard or frame, mainly since you are using it in a TOC. And as other forum members have pointed it out, it can be difficult to read a TOC with a full background image. Also pay special attention all what Hitch told you; she is an authority regarding ebooks for Amazon.

[JSWolf]

And most of us here have been reading eBooks and diving into the code enough to know what works and what doesn't work. Background images do not work in most cases.

[Hitch]

Originally Posted by RbnJrg

With KF7 devices you can't use any image as background. So, loose your hopes in that sense.

I think s/he knows that. ;-)

Well, since we can't watch what is the image you are using as background, maybe the property "background-size: contain" is not the properly in this case. Maybe you want to use a background image as border, guard or frame, mainly since you are using it in a TOC. And as other forum members have pointed it out, it can be difficult to read a TOC with a full background image. Also pay special attention all what Hitch told you; she is an authority regarding ebooks for Amazon.

Yup, it's going to be interesting, and the pesky part is, it's one of those things that you can't really know until the book is live and on sale. I suspect that the TOC won't look as they want in the LITB, although hell, anything is possible--but containers that work inside a wee device don't seem to work very well in a webpage which by definition, you don't control, and of course, the 'ooops, when I click the image zooms, rather than the link working' issue...that wil have to be experienced, I suspect, for the end client to realize that this mayn't have been the BEST idea ever.

Meh, we've all done and tried a lot of dumb crap over the years. We made a book with sidebars, for crying out loud. I'm still glad we did it, but...sheesh, when I think about people reading that on a smartphone! Oy! Sometimes, you have to let a client come to a realization themselves, with a wee bit of guidance. {shrug}.

I mean, everybody makes mistakes. If you haven't heard about it, Harper Collins (HC) really screwed the pooch on Debbie Harry's latest book, "Face It" in the Kindle version. Some genius decided that because the book was highly visual (a fair number of spreads), they'd make the book in FXL. Okay, so, [shrug], wouldn't have been my recommendation, but I can almost kinda maybe see why. But here's the thing--they didn't make it as print replica. They made it using Kindle Kids' Book Creator--which means, the entire book displays in spreads (not changeable) and, wait for it--you can't zoom the page. The ONLY way to read it is to tap the text and then read each paragraph, in the text box popups. Read, swipe, next paragraph in a box, read, swipe, lather-rinse-repeat.

Nearly 400 pages, like this. Yowza. I was asked to take a look at it, professionally, and I found it onerous on my Kindle 10", much less on a smartphone or something like that. Apparently, HC also didn't realize that the text box popups wouldn't work on ALL devices, either.

What a goat-you-know-what. Amazon actually REMOVED all the negative reviews, lambasting the format, (yes, I know this factually because I personally saw them all and then they poofed them!), and "they" (not sure who "they" is/are, as of now) are working on a new version. The first new version was the same exact thing--another KKBC file!!!--and now, not sure what the latest is. I told the person who asked me to take a look at it on his/her behalf that had it been me, I'd have made a reflowable and lost some of the spreads, in the pursuit of readability.

Now the UK store has a file on sale that looks like an uploaded Word file (!), so...if HC can screw up, so too can some self-pubbing client somewhere that wants an image behind their TOC. :-)

Hitch

[JSWolf]

What I don't get is with all the Kobo's, nooks, and Kindles out there, why aren't more people previewing their eBook on an eInk screen to see how it looks? A computer screen or a tablet just isn't close enough to tell if it's going to work on eInk and that goes for Kindle Previewer as well.

Graphics display differently. The weight or the font(s) makes a difference when they want to embed. Because it's 16 shades of gray things like colored text may not work. And other things.

So really, test your eBooks on the sorts of devices people will be using to read with. Get some Kindles, Kobos, and nooks with different size screens and see what happens. On the Kobo, try it in ePub and KePub. On the Kindle, try it in Mobi & KF8. On the nook, try it in ePub and see how it is. It should work well on all three devices.

[Tex2002ans]

Originally Posted by JSWolf

What I don't get is with all the Kobo's, nooks, and Kindles out there, why aren't more people previewing their eBook on an eInk screen to see how it looks? A computer screen or a tablet just isn't close enough to tell if it's going to work on eInk and that goes for Kindle Previewer as well.

According to the "reading stats" at ebookcraft talks the past few years, e-ink is in the small minority of readers (<15%). Vast majority are reading on tablets/phones (with phones consistently growing immensely).

Side Note: I personally think their stats are skewed, but since I don't have my own to back this up... I'm in the MobileRead e-ink bubble just like many of us.

A lot of things I think are common knowledge are not. Like you wouldn't believe, when I visited one of the publishers I do a lot of work for, most of the workers there STILL had no idea what an EPUB/MOBI was. And according to their server stats, >90% of downloads were still PDF, AND if there's only EPUB/MOBI, they get lots of emails from people demanding PDF versions of ebooks... preposterous!!!

(And this site is aimed towards a younger crowd, high school + college age... you would think these people are more technically savvy!!!)

People might know "I read on a Kindle", but they have no idea what MOBI or sideloading is (they just click on the buy button on Amazon and poof, it magically appears).

And PDF is a "known format", people have been seeing it for decades, so they instantly recognize that. The general public still has no idea what an EPUB/MOBI is.

[Cepheus]

Wow, thanks for all the comments and feedback. It really helps alot. We finally got the full manuscript from the copy editor and transforming it with our xml/xslt/xhtml process it seems to work well for kf8. Surprise though, it does not work well on kf7. In most cases the toc disappears from reading devices altogether. It actually does show up on kf7 device if the <body> tag for the toc is given a unique id; not sure what to think of that.
The attempt is just an experiment. If for some reason we could get it to work it'd be great for the book. No one is pushing for it no matter what. I'm going to recommend that we don't because of all of the reasons listed above. It's a fun experiment though.

[Hitch]

Originally Posted by Cepheus

Wow, thanks for all the comments and feedback. It really helps alot. We finally got the full manuscript from the copy editor and transforming it with our xml/xslt/xhtml process it seems to work well for kf8. Surprise though, it does not work well on kf7. In most cases the toc disappears from reading devices altogether. It actually does show up on kf7 device if the <body> tag for the toc is given a unique id; not sure what to think of that.
The attempt is just an experiment. If for some reason we could get it to work it'd be great for the book. No one is pushing for it no matter what. I'm going to recommend that we don't because of all of the reasons listed above. It's a fun experiment though.

Sorry, what do you mean when you say:

Surprise though, it does not work well on kf7.

I take it that was ironic, or sarcasm? As everybody here said it wouldn't work in KF7?

Hitch