Mobileread
Background image with text on top?
#1  Psymon 11-24-2013, 12:19 AM
I have a perfect use in a new book I'm working on for having each chapter begin with a nice, big heading/chapter title on a single page and -- if at all possible -- a background image on that page. I know how to do this and have it work in iBooks, but it doesn't seem to work in ADE. I've just spent the last two or three hours scouring countless messages in these forums (and elsewhere on the 'net) and I can't seem to find any consensus on a solution that will work across-the-board.

Is there a way? I just want to throw in a single page here and there with a full-page background image, and put the chapter title on top of that -- I'm starting to think that there's simply no reliable way to do it in epub and would probably be better off just scrapping the whole idea.

Hopefully someone can tell me I'm wrong, and there is a way?

Reply 

#2  Toxaris 11-24-2013, 01:17 AM
Altough you can define a background image in the stylesheet, how will you ensure that it will be a full-page image?
Reply 

#3  Psymon 11-24-2013, 01:34 AM
Well, I have this ebook called "eBook Typography", by Chris Jennings -- which, surprisingly, doesn't validate and is chock full of zillions of errors -- and in there he has all his chapter headings with a background image which work just great in iBooks... but which don't show up at all in ADE.

The way he says to do it, though (but which only works in iBooks) is as follows, quoted directly from his book:

Quote
...what I have done here is to provide a background number as an image and then created a <div> with a rule that sets this in the centre of the page like this:

.one, .two, .three, .four, .five, .six {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}


and for each section the class name is changed:

div.one {
background-image: url(images/one.png);
}


One significant rule here is:

background-size: contain;

Which resizes the image to fill the page, but making all visible.
Like I said, seems to work great in iBooks, but the background image doesn't show up at all in ADE. I scoured the forums here (and elsewhere) for hours, though, and can't seem to find any alternative solution -- not one that's workable and reliable, anyway.
Reply 

#4  Jellby 11-24-2013, 03:04 AM
background-image (or -position, -repeat, -size) is not in the required set of CSS properties for ePub 2.
Reply 

#5  Doitsu 11-24-2013, 05:49 AM
Quote Jellby
background-image (or -position, -repeat, -size) is not in the required set of CSS properties for ePub 2.
It's supported, though not recommended, in ePub3 and KF8/AZW3.

@Psymon: Have a look a the Custom Chapterhead style --- possible in CSS? topic for an interesting way to style headings without background images.
Reply 

#6  Toxaris 11-24-2013, 05:54 AM
Jellby is correct, it is only background-color is supported. I will put the book of Chris Jennings on my blacklist. What use is such a book when it does not validate or does not specifically mentions that things only specific devices/programs?
Reply 

#7  Psymon 11-24-2013, 07:53 AM
Two replies here...

Quote Doitsu
@Psymon: Have a look a the Custom Chapterhead style --- possible in CSS? topic for an interesting way to style headings without background images.
Thanks! I saw that page in my endless search yesterday, but that's not quite what I want to do. I definitely want an image behind the text (long story -- it's something rather symbolic about the image that complemented each story in this book and would have been great to start each chapter with), but if I can't do that in any "legitimate" way then I'm just as well either leaving that image on a separate page... or just not using it at all.

Appreciate the suggestion, though.

Quote Jellby
background-image (or -position, -repeat, -size) is not in the required set of CSS properties for ePub 2.
Well, I guess that answers my question -- I suppose I shouldn't even be thinking about using a background image at all, then?

I did find another thread here...

http://www.mobileread.com/forums/sho...d.php?t=215430

...which seemed to have an alternative solution that doesn't used background-image. Right near the end (second-last reply at this time) he seems to have come up with a way of doing it that doesn't "look" quite the way I want, but I wonder if it can be tweaked so that it does.

Hmm... I'll play around with that code over my morning coffee, and if I can come up with something I'll post it here (and if you don't hear back from me again then either it didn't work, or else it worked but I had a heart attack and suddenly died).
Reply 

#8  RbnJrg 11-24-2013, 08:42 AM
Quote Psymon
I have a perfect use in a new book I'm working on for having each chapter begin with a nice, big heading/chapter title on a single page and -- if at all possible -- a background image on that page. I know how to do this and have it work in iBooks, but it doesn't seem to work in ADE. I've just spent the last two or three hours scouring countless messages in these forums (and elsewhere on the 'net) and I can't seem to find any consensus on a solution that will work across-the-board.

Is there a way?
Hi Psymon;

Please, could you post a screenshoot of your iBooks so I can see better what you want in ADE?

By the way, did you see this post:

http://www.mobileread.com/forums/sho...87&postcount=5

That solution also works in ADE.

Regards
Rubén
Reply 

#9  Psymon 11-24-2013, 09:19 AM
Quote RbnJrg
Hi Psymon;

Please, could you post a screenshoot of your iBooks so I can see better what you want in ADE?
I'll get to that in a second here, but first I'm intrigued with what you just pointed out...

Quote
By the way, did you see this post:

http://www.mobileread.com/forums/sho...87&postcount=5

That solution also works in ADE.
In all the countless messages/threads I read yesterday, no, I didn't come across that one! Wrong search criteria, I guess.

That's interesting, as I've tried the epub there out in both iBooks and ADE, and indeed it seems to work just fine in both -- although looking at the code it's apparently making use of a background image (which supposedly should not work, or at least not be supported).

I'm not sure what to do. I want to do it "right", and then this example you gave here seems to work, and yet it's "wrong" (even though it validates, once I add the title/language in).

I just spent the last little while trying to put together something that I hoped would work based on what the guy did in that previous link I provided (here's the link again to save you scrolling/searching for it)...

http://www.mobileread.com/forums/sho...d.php?t=215430

I created the attached file based on that -- pretty much guessing my way through the CSS and adapting it into what I want to do.

If you look at the code in Sigil, you won't see the background image in the preview, BUT if you look at it in ADE, the background shows up, with the title text (etc.) overlaying like it's supposed to, and it's almost exactly how I'd like it to be except for the fact that I'm not sure how to get the image to resize itself to fit within the window and no bigger.

And, I don't know how to get it to work in iBooks (which it doesn't).

I'm by no means an "expert" at CSS, though -- I wonder if perhaps this might have provided some inspiration for someone else to come up with a workable solution?

It'd be so cool if I could get this to work right, without using background-image (even though RbnJrg seems to have no provided a solution that seems to work that way!).

in advance!
[epub] Background image test.epub (251.5 KB, 312 views)
Reply 

#10  RbnJrg 11-24-2013, 11:05 AM
Quote Psymon

...

That's interesting, as I've tried the epub there out in both iBooks and ADE, and indeed it seems to work just fine in both -- although looking at the code it's apparently making use of a background image (which supposedly should not work, or at least not be supported).
Yes, my solution uses a background image (that is because is what the OP of that thread wanted). And is perfectly valid ADE supports background images (it's a bit buggy but all in all, supports background images).

Quote
I'm not sure what to do. I want to do it "right", and then this example you gave here seems to work, and yet it's "wrong" (even though it validates, once I add the title/language in).
Why is wrong? It's not wrong at all If you use my solution, your ebook will work in iPad, ADE (and ereaders based on ADE) and Kindle.

Quote
I just spent the last little while trying to put together something that I hoped would work based on what the guy did in that previous link I provided (here's the link again to save you scrolling/searching for it)...

http://www.mobileread.com/forums/sho...d.php?t=215430

I created the attached file based on that -- pretty much guessing my way through the CSS and adapting it into what I want to do.

If you look at the code in Sigil, you won't see the background image in the preview, BUT if you look at it in ADE, the background shows up, with the title text (etc.) overlaying like it's supposed to, and it's almost exactly how I'd like it to be except for the fact that I'm not sure how to get the image to resize itself to fit within the window and no bigger.

And, I don't know how to get it to work in iBooks (which it doesn't).
Use my solution It's valid and simplifies the things. But now I know what you want, I think I can write some code without using background images but, why should we do that if already there is something that works and is simpler? (and also work in Sigil, ADE, iPad and Kindle )

Quote
It'd be so cool if I could get this to work right, without using background-image (even though RbnJrg seems to have no provided a solution that seems to work that way!).
I repeat you, is perfectly valid to use an image as background. It's not a wrong way to do the things.
Reply 

  Next »  Last »  (1/15)
Today's Posts | Search this Thread | Login | Register