Background image with text on top?

[Psymon]

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.

Well, it's just my concern that others have mentioned that using background-image isn't really a valid epub way of doing things -- but it's all over my head, so I can't actually give you more details than that.

I do seem to recall that in one of the threads I looked at the other day (while trying to find how to do this, before posting my question) had one person coming up with a possible solution, and another person replying by saying that what they'd done should be put in an SVG wrapper -- but if I remember correctly, that's where that thread ended and there was no explanation or expansion on that (I don't have a link for that thread, off-hand, but could probably find it again -- although as I said it didn't go into the reason "why" it should be in an SVG wrapper, let alone did that person explain how).

Gotta run -- busy day today! And thanks again to Rubén for all your great input here!

[Jellby]

Originally Posted by Psymon

Well, it's just my concern that others have mentioned that using background-image isn't really a valid epub way of doing things -- but it's all over my head, so I can't actually give you more details than that.

Due to the way CSS works, using background-image does not mean the ePub will be invalid. It is still a perfectly valid and compliant ePub 2 file (as long as there's nothing else breaking it). It just means that just-as-compliant readers are free to ignore the background image and not display it. If that happens, you cannot blame the reader. Whether or not this possibility is enough to worry you, that depends on the nature of the background image and your nitpicking level

[SBT]

I'm a great fan of SVG, but in this case, may it not work with a negative bottom margin? Something like:

<img src="prettypicture.jpg" style="width:100%;margin-bottom:-80%;" />
<h2 style="page-break-after:always;">Pretty pictures</h2>

(It is possible to have text immediately after the image, but then things get a bit iffy)
Or have somebody already suggested this? I had a little bit of trouble finding every one of the helpful links so far suggested in this thread.

[Jellby]

Originally Posted by SBT

I'm a great fan of SVG, but in this case, may it not work with a negative bottom margin?

Note that percentages in margins are to be referred to the width of the element, regardless of whether the margin is vertical or horizontal.

[RbnJrg]

Originally Posted by SBT

I'm a great fan of SVG, but in this case, may it not work with a negative bottom margin? Something like:

<img src="prettypicture.jpg" style="width:100%;margin-bottom:-80%;" />
<h2 style="page-break-after:always;">Pretty pictures</h2>

(It is possible to have text immediately after the image, but then things get a bit iffy)
Or have somebody already suggested this? I had a little bit of trouble finding every one of the helpful links so far suggested in this thread.

Did you see the following threads?

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

and

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

[AlexBell]

Originally Posted by RbnJrg

Hi Alex;

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.

Attachment 115733

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

Thanks, Rubén

I didn't explain myself clearly - I meant that the image with superimposed text does the same job as a background image with text - although of course the text can't be made bigger or smaller.

You have excellent taste in ebooks.

[Psymon]

Well, I'm frustrated -- again. I spent hours last night doing up all 20+ chapter title pages in that SVG method you posted, Rubén, and although they all look great now, I'm such a dummy that it was only after I'd spent all that time fixing up every chapter title so that it would look nice -- which is a total pain to do when you have to adjust everything with pixels rather than just specifying a heading or paragraph or whatever -- that it hit me that in the process I'd invariably lost all my <h1> tags (duh!) and hence none of the chapters were getting marked to the table of contents either.

If only for this latter reason (re the ToC) and, indeed, for the MUCH greater ease of editing, I thought I'd go try out your background-image method instead, and see what happens, i.e....

Originally Posted by RbnJrg

By the way, did you see this post:

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

That solution also works in ADE.

I couldn't get this to work for me -- at least, not with that background image that I've been using. I'm assuming that I'm doing something wrong, but I don't know what. That background image is 1200x1800, but I adjusted the code you gave at the above link to give the image a height of 900.

In Sigil it looks fine -- and I haven't looked yet, but I'm guessing it probably would look fine in iBooks -- but in ADE it doesn't work at all. The image comes out HUGE (i.e. full-size), not constrained to the 900px height, let alone is it "contained". And my title text seems to get lost off to the side somewhere, "invisible".

Any suggestions? What I had hoped to do isn't quite what you had done at the above link -- you basically had a lo-res image that sat at the top left corner of the page (or that's how it "looks", of course), but I wanted a full-page image, and then plop my chapter title text on that.

If it's just not really doable or practical, well, I'll just scrap the idea -- but even if it works in some readers and then for others just shows the text but no background image at all (without "breaking" anything), I could live with that.

[mrmikel]

>>If it's just not really doable or practical, well, I'll just scrap the idea -- but >>even if it works in some readers and then for others just shows the text but no >>background image at all (without "breaking" anything), I could live with that.

The only problem with that is which ones it breaks on, unless this is not a commercial job, just for your own use. It can be hard to test for all of them.

[Psymon]

Originally Posted by mrmikel

>>If it's just not really doable or practical, well, I'll just scrap the idea -- but >>even if it works in some readers and then for others just shows the text but no >>background image at all (without "breaking" anything), I could live with that.

The only problem with that is which ones it breaks on, unless this is not a commercial job, just for your own use. It can be hard to test for all of them.

Well, if it worked in most readers and displayed the way it's supposed to, that would be great, and for the others if the way that it "broke" was simply that the background image didn't show up (but there was no issues with the text chapter titles that would be on top of that), then that would be okay. I just wouldn't want to do something that might "break" things in a way that would ruin things that shouldn't be ruined.

[RbnJrg]

Originally Posted by Psymon

Well, I'm frustrated -- again. I spent hours last night doing up all 20+ chapter title pages in that SVG method you posted, Rubén, and although they all look great now, I'm such a dummy that it was only after I'd spent all that time fixing up every chapter title so that it would look nice -- which is a total pain to do when you have to adjust everything with pixels rather than just specifying a heading or paragraph or whatever -- that it hit me that in the process I'd invariably lost all my <h1> tags (duh!) and hence none of the chapters were getting marked to the table of contents either.

My english is not so good so I don't understand you very well; what is your issue now? The problem is that you lost all <h1> tags? If the text over your background image works fine, then the another issue is trivial.

According to what I posted, indeed, there is not any <h1> tag so it can't appear in the TOC . Suppose you have something like that:

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

Then do the following:

1. First, in your stylesheet.css file, add this:

h1 {
    display: none;
}

2. Now above the <div> tags where you enclose your svg wraper write:

<h1 title="Whatever be the title you want here">&nbsp;</h1>

Of this way, you'll end with something like this:

<h1 title="Whatever be the title you want here">&nbsp;</h1>

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

Now regenerate the TOC by pressing Ctrl+T in Sigil. You'll see what you want to see

I couldn't get this to work for me -- at least, not with that background image that I've been using. I'm assuming that I'm doing something wrong, but I don't know what. That background image is 1200x1800, but I adjusted the code you gave at the above link to give the image a height of 900.

In Sigil it looks fine -- and I haven't looked yet, but I'm guessing it probably would look fine in iBooks -- but in ADE it doesn't work at all.

I don't know why is not working in ADE for you; maybe you are doing something wrong; see this screenshot of my ADE:



Could you post here the image you are using and the text you want to write over it? Maybe of that way I can say you more things about what to do.

Regards
Rubén

[Jellby]

Why do you need a <div>? Can't you just have the SVG code inside ah <h1>?

<h1 title="Chapter title">
  <svg xmlns="http://www.w3.org/2000/svg" ...>
    ...
  </svg>
</h1>

[RbnJrg]

Originally Posted by Jellby

Why do you need a <div>? Can't you just have the SVG code inside ah <h1>?

<h1 title="Chapter title">
  <svg xmlns="http://www.w3.org/2000/svg" ...>
    ...
  </svg>
</h1>

That is because in theory, you can't enclose a svg wrapper inside <h>, <p> and some others tags. Sigil allows the use you propose but maybe some ereaders doesn't and Psymon is a "purist" and he want to use a svg wrapper instead of a background image because he fears that some devices doesn't show that image. For that reason I used a <div> container.

[Jellby]

Originally Posted by RbnJrg

That is because in theory, you can't enclose a svg wrapper inside <h>, <p> and some others tags.

"In theory"? The only restriction I'm aware with <svg> is that it can be wherever <img> is allowed. This means it can be in <div> (or <p> or <hX>), but not directly inside <body> or <blockquote>, for instance. Is there some other restriction? Do you have a link for that?

Now, if you'd said "in practice", meaning that some readers choke with that, I'd fine with it (I don't know if that's the case, though)

(Anyway, this is something that only affects automatic TOC generation/update with Sigil. You can always create the NCX by hand and add whatever links and names you want, regardless of the HTML code.)

[RbnJrg]

Originally Posted by Jellby

"In theory"? The only restriction I'm aware with <svg> is that it can be wherever <img> is allowed. This means it can be in <div> (or <p> or <hX>), but not directly inside <body> or <blockquote>, for instance. Is there some other restriction? Do you have a link for that?

If you for example, in Sigil, enclose a svg wrapper inside a <blockquote> you'll see that Sigil allows that and shows the svg perfectly in both, the Book View and Preview. But if after that you want to validate the ePub with FlighCrew, you'll get a message saying:

element 'svg' is not allowed for content model '(p|h1|h2|h3|h4|h5|h6|div|ul|ol|dl|pre|hr|blockquote|address|fieldset|table|switch|form|noscript|ins|d el|script)'

(The curious thing is that, in that list, also is included div )

Of course, the svg COULDN'T BE inside <blockquote> tags but it WORKS and also WORKS in ADE!!! (below I attach a working ePub with a svg enclosed in blockquotes tags; of course, it doesn't validate, but working).

So, in order to avoid problems, I decided that the better thing was to enclose the svg inside a DIV.

(Anyway, this is something that only affects automatic TOC generation/update with Sigil. You can always create the NCX by hand and add whatever links and names you want, regardless of the HTML code.)

Agree. For that reason is that I told Psymon that if that was his problem, then it was a trivial thing to solve it

[Jellby]

Originally Posted by RbnJrg

If you for example, in Sigil, enclose a svg wrapper inside a <blockquote> you'll see that Sigil allows that and shows the svg perfectly in both, the Book View and Preview. But if after that you want to validate the ePub with FlighCrew, you'll get a message saying:

element 'svg' is not allowed for content model '(p|h1|h2|h3|h4|h5|h6|div|ul|ol|dl|pre|hr|blockquote|address|fieldset|table|switch|form|noscript|ins|d el|script)'

(The curious thing is that, in that list, also is included div )

Exactly. As I said above, <svg> (or <img>) is not allowed to be the direct child of a <blockquote>, because <blockquote> can only have block-level children. That's not a surprise.

But I think you misunderstand the message. The list is not giving all the elements where <svg> is forbidden, but all the elements that are allowed there: and "svg" (or "img") is not in the list, hence the error.

The case with <p> or <hX> is entirely different. Those can have character-level children, and therefore <svg> or <img>. Do you get validation errors with <svg> inside <p> or <hX>?