Background image with text on top?

[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? 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?

[Toxaris]

Altough you can define a background image in the stylesheet, how will you ensure that it will be a full-page image?

[Psymon]

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:

...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.

[Jellby]

background-image (or -position, -repeat, -size) is not in the required set of CSS properties for ePub 2.

[Doitsu]

Originally Posted by 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.

[Toxaris]

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?

[Psymon]

Two replies here...

Originally Posted by 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.

Originally Posted by 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...

https://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).

[RbnJrg]

Originally Posted by 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:

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

That solution also works in ADE.

Regards
Rubén

[Psymon]

Originally Posted by 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...

By the way, did you see this post:

https://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)...

https://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!

[RbnJrg]

Originally Posted by 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).

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.

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)...

https://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 )

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.

[RbnJrg]

Well, this is a "new" way of doing the things without using a background image. In this case Psymon, you'll have to use a SVG container. In your .html file write the following:

<body>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 533 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="800" width="533" xlink:href="../Images/bamboo_fence.jpg"></image>

    <text fill="red" style="font-size: 50px" text-anchor="middle" x="266.5" y="200">
      This Here

      <tspan x="266.5" y="280">Is A</tspan>

      <tspan x="266.5" y="370">Chapter Title</tspan>
    </text>

    <image height="63" width="63" x="235" xlink:href="../Images/ornament.png" y="450"></image>

    <text fill="green" style="font-size: 30px; font-style: italic" text-anchor="middle" x="266.5" y="600">By Author</text>
  </svg>
</div>
</body>

This is a screenshot of ADE:



This is a screenshot of Sigil:



This is a screenshot of Kindle Previewer:



I don't know how it looks in iPad since I don't have one

Below you can see my ePub.

One more thing: I changed the resolution of your "bamboo_fence" image to 800 x 533 px; take in count that. Of course, you can put the text in any place of the svg container; what I did is just an example.

Regards
Rubén

PS: I still think is better to use a background image.
PS2: WITH THIS WAY OF DOING THE THINGS, YOU MUST ALWAYS WORK WITH PIXELS, OTHERWISE YOU'LL HAVE TROUBLES IN ADE.

[Psymon]

First, to RbnJrg, I haven't taken the code you wrote and plopped it into my ebook to try it out, but I definitely take your word for it that it works, and can't thank you enough for that! This truly will be awesome if it all does work out, and the only thing that really mystifies me is that this never seemed to come up before, that nobody else ever wanted to do this before -- at least, after all that searching yesterday, I couldn't find an answer to this (which you now seem to have provided for me).

Thanks so much again! But before I respond a little more to your message, the only thing that concerns me about this is what Jellby wrote (and which Toxaris reiterated, too)...

Originally Posted by Jellby

background-image (or -position, -repeat, -size) is not in the required set of CSS properties for ePub 2.

It's really great if indeed it works, but my worry is... is this going to "blow up" on me down the road for some as-yet-unforeseen reason?

Back to your reply, RbnJrg...

Originally Posted by RbnJrg

I don't know how it looks in iPad since I don't have one

I just tried it out, and it comes out perfectly! Of course, for different lengthed titles I'm going to have to make some adjustments here and there (re font sizes or whatever), but I guess I'll figure that out -- pending any replies from others giving a drastic reason that I shouldn't do it this way (which I'm keeping my fingers crossed won't happen!).

One more thing: I changed the resolution of your "bamboo_fence" image to 800 x 533 px; take in count that.

How come? I had it at 1200x1800, if only so that it'll look better on retina displays -- also, I'm not sure why anyone might want to do this for a chapter-title page, and since the image isn't really all that "exciting" or anything, but I did notice that one can double-tap on it still (like any other image on the iPad) and zoom in on it. Interestingly (for me), not just the image zooms in, but the text on top of it as well, almost as though it wasn't "text" but rather that text was part of the graphic itself.

Of course, you can put the text in any place of the svg container; what I did is just an example.

I don't know the first thing about SVG, I must confess -- up to this point, I've used it but simply in the context of copying the code of others, but it makes no sense to me half the time. I guess that's yet another thing for me to put on my "to do" (or "to learn") list. :/

PS: I still think is better to use a background image.

Except I couldn't get that to work -- but I'm dumb (with regard to some things, anyway). And that caution from Jellby/Toxaris does concern me, too.

PS2: WITH THIS WAY OF DOING THE THINGS, YOU MUST ALWAYS WORK WITH PIXELS, OTHERWISE YOU'LL HAVE TROUBLES IN ADE.

Oh, okay, I'll keep that in mind. If one does it in pixels, though, doesn't that potentially cause problems with retina displays (with their higher resolution) that things well then all be "off"?

Thanks so much again, RbnJrg! I can't wait to try this out in my book for all the chapters (20+ of them), although unfortunately I have company coming over now, and over the next two days I'm helping my mom move -- so it might have to wait until later this week. Hopefully I'll be able to sneak in some "me" time, though, and I do look forward to any more comments on this subject (from you or others).

Cheers!

[RbnJrg]

Originally Posted by Psymon

Thanks so much again! But before I respond a little more to your message, the only thing that concerns me about this is what Jellby wrote (and which Toxaris reiterated, too)...

It's really great if indeed it works, but my worry is... is this going to "blow up" on me down the road for some as-yet-unforeseen reason?

Many properties shouldn't be supported by ePub2 but anyway works in ADE, iPad, Kindle, etc. If we only should work with the specs of ePub2 then, many things couldn't be done! Don't worry, things are not going to blow up

Back to your reply, RbnJrg...

I just tried it out, and it comes out perfectly! Of course, for different lengthed titles I'm going to have to make some adjustments here and there (re font sizes or whatever), but I guess I'll figure that out -- pending any replies from others giving a drastic reason that I shouldn't do it this way (which I'm keeping my fingers crossed won't happen!).

Glad to heard that Of course, you can make any change in the font-size; just modify the line style="font-size: 50px", by changing 50px for any other size. And you can modify the position of the text by changing the "x" and "y" values (x="nnn" y="nnn", where "nnn" are the values of the x,y "coordinates").

One more thing: I changed the resolution of your "bamboo_fence" image to 800 x 533 px; take in count that.

How come? I had it at 1200x1800, if only so that it'll look better on retina displays -- also, I'm not sure why anyone might want to do this for a chapter-title page, and since the image isn't really all that "exciting" or anything, but I did notice that one can double-tap on it still (like any other image on the iPad) and zoom in on it. Interestingly (for me), not just the image zooms in, but the text on top of it as well, almost as though it wasn't "text" but rather that text was part of the graphic itself.

If you want, you can maintain the original size. In that case, you have to modify the size of the "SVG viewbox" (instead of viewBox="0 0 533 800" you'll have to use viewBox="0 0 1200 1800" and instead of image height="800" width="533" you must use image height="1800" width="1200"). And yes, the text on top of it becomes part of the "image" itself because all (background image and text) is inside a svg wrapper.

PS: I still think is better to use a background image.

Except I couldn't get that to work -- but I'm dumb (with regard to some things, anyway). And that caution from Jellby/Toxaris does concern me, too.

You have now two ways of doing the things Both of them are valid and both of them will work in ADE (and ereaders based on ADE), iPad and Kindle

PS2: WITH THIS WAY OF DOING THE THINGS, YOU MUST ALWAYS WORK WITH PIXELS, OTHERWISE YOU'LL HAVE TROUBLES IN ADE.

Oh, okay, I'll keep that in mind. If one does it in pixels, though, doesn't that potentially cause problems with retina displays (with their higher resolution) that things well then all be "off"?

With SVG images and SVG wrappers you shouldn't have that kind of issue.

Thanks so much again, RbnJrg!
Cheers!

You are welcome!

[AlexBell]

I'm sorry, I'm probably going to expose my ignorance or lack of sophistication here, but I don't understand your question. I have uploaded several ebooks in which I took an image to use as the cover, and then overwrote the book title on that image. One of them is

Saladin and the Conquest of Jerusalem by Stanley Lane-Poole, in the ePub section at

https://www.mobileread.com/forums/sho...d.php?t=224264

The cover is from a painting by Gustave Doré, and I think could qualify as background image.

The html and CSS are certainly nothing fancy. Could this method not be used for an internal chapter? I presume you'll be starting the chapter on a new page.

[RbnJrg]

Originally Posted by AlexBell

I'm sorry, I'm probably going to expose my ignorance or lack of sophistication here, but I don't understand your question. I have uploaded several ebooks in which I took an image to use as the cover, and then overwrote the book title on that image. One of them is

Saladin and the Conquest of Jerusalem by Stanley Lane-Poole, in the ePub section at

https://www.mobileread.com/forums/sho...d.php?t=224264

The cover is from a painting by Gustave Doré, and I think could qualify as background image.

The html and CSS are certainly nothing fancy. Could this method not be used for an internal chapter? I presume you'll be starting the chapter on a new page.

Hi Alex;

Certainly you can use an image as a background and write above, that is the easiest method and the one I recommend. The solution that I developed by using a SVG wrapper I did it because Psymon didn't want to use a background image.

As for the book you mention, I was watching it and I didn't find a cover with a background image and text on top, maybe you did that in another book and not in the one you mention.



But anyway, it is perfectly possible to use a background image and write text on it. That is what I did in:

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

By the way, very very nice layout of the book you posted; I really like it a lot. You have made a great work with it; congratulations.

Regards
Rubén