Background Image w/ Text on Top

[BookWalker]

I've used InDesign CS6 to layout a print book. (Yes, I know I need to get new with the program, but I've got a lot of space to clear up and am still running Windblows 7) The print version looks great, but I made one vital mistake. I placed an image behind every chapter number. Image attached.

I'd like to keep it the same, if at all possible. I know that my version of ID can't handle taking care of this and can only anchor images to text within, above, or below.

I'm trying to use Calibre to edit the book to get the same look. I'm a severe newb using Calibre, as well as HTML and CSS, but I can grasp and learn what is taught. I did have the speech bubble floating where it belonged while using Edit Book, but when I saved and looked at it as an epub, it was not showing up in Calibre E-book viewer the same.

I've searched endlessly to find help to accomplish getting this image behind the chapter number, with no results. I've considered making a new image with the speech bubble and the chapter numbers, but then I'd have to work around the TOC showing up properly too. Each chapter has a number and title, which they client would like included.

Does anyone have any advise on how to overcome this problem?... I just want the eBook to look like the print version if possible, and to function across all/most devices properly.

Thanks much for your help!

[davidfor]

Firstly, someone is going to come along and tell you not to do this. Ignore them. Personally, I like my books with a bit of style and personality. If it fits with the book, do it.

If they come along and say it won't work, that is a little different. There will be different problems depending on the device or app. Some will handle it better than others.

Unfortunately, I don't know how to do it. The only times I can think of seeing something like this, they used a different image for each chapter. The only other one I can think of used an separate images above and below the chapter title.

The two suggestions I can make are...

Ask in the Workshop forum. That is where the ebook formatting experts hang out. They will be able to tell you how to achieve what you want, if it can.

The other suggestion is to post a sample. That will give people something to look at and experiment with. It just needs to a page or so of text, the image and the CSS to show what you have tried. Mentioning where it does and doesn't work is also a good idea.

[Paulie_D]

If you make the chapter number element large enough you can apply a background image.

Here's an example of adding an image to every page but it can easily be adapted to specific elements like chapter number elements.

https://ebooks.stackexchange.com/que...-or-epub-books

Also a quick Google found - https://www.mobileread.com/forums/sh...d.php?t=227739 which is exactly what you are asking.

[BookWalker]

Originally Posted by davidfor

Firstly, someone is going to come along and tell you not to do this. Ignore them. Personally, I like my books with a bit of style and personality. If it fits with the book, do it.

If they come along and say it won't work, that is a little different. There will be different problems depending on the device or app. Some will handle it better than others.

Unfortunately, I don't know how to do it. The only times I can think of seeing something like this, they used a different image for each chapter. The only other one I can think of used an separate images above and below the chapter title.

The two suggestions I can make are...

Ask in the Workshop forum. That is where the ebook formatting experts hang out. They will be able to tell you how to achieve what you want, if it can.

The other suggestion is to post a sample. That will give people something to look at and experiment with. It just needs to a page or so of text, the image and the CSS to show what you have tried. Mentioning where it does and doesn't work is also a good idea.

Thanks for the input.

Yes, I prefer adding a bit of something on each chapter page. It enhances the books and my clients always love the extra touch.

Yep, not being a techie, I do know enough that it might be tricky how the eBook will look across devices and apps. It's a pity there is not a standard.

Thanks for the direction to the Workshop forum. I'll go post there and supply a chapter page for them to mess with if they want to have a bash at it.

In then end, I might have to do an image for each chapter header and figure out how to correct the TOC. That might be the easier route to take since an image is easy to plop at the top in the center.

[BookWalker]

Originally Posted by Paulie_D

If you make the chapter number element large enough you can apply a background image.

Here's an example of adding an image to every page but it can easily be adapted to specific elements like chapter number elements.

https://ebooks.stackexchange.com/que...-or-epub-books

Also a quick Google found - https://www.mobileread.com/forums/sh...d.php?t=227739 which is exactly what you are asking.

Thanks much for you reply.

I did find these links that you listed. I tried them out and it didn't work. Then again, I could be placing the code in the wrong areas, since I don't know much about coding.

[Brett Merkey]

I agree with davidfor that the Workshop forum is a good place to go with your question. I used to do what you want -- with good effect -- but I don't recommend it for you. Using a title background image as you request is extremely fidgety work even for testing on one screen.

You can precisely position image and text using pixels but if your client and users have devices with different screen resolutions, the results will look (on average) very sloppy.

If you position with relative units like em and %, everything may look nice -- until your client/user changes their screen font size.

Where you cannot predict or control results, a professional seeks another path.

[BookWalker]

Originally Posted by Brett Merkey

I agree with davidfor that the Workshop forum is a good place to go with your question. I used to do what you want -- with good effect -- but I don't recommend it for you. Using a title background image as you request is extremely fidgety work even for testing on one screen.

You can precisely position image and text using pixels but if your client and users have devices with different screen resolutions, the results will look (on average) very sloppy.

If you position with relative units like em and %, everything may look nice -- until your client/user changes their screen font size.

Where you cannot predict or control results, a professional seeks another path.

Solid advice. Thanks.

I did post over in the other forum. I'll see what is said. It might be a bad idea after all.

It's a shame, because the speech bubble really does go with the book content and would enhance it.

[JSWolf]

One thing to do is take your graphic images for each chapter and add in the chapter number to the image so it's not text on an image but just an image. I've seen it done that way many times.

[BookWalker]

Originally Posted by JSWolf

One thing to do is take your graphic images for each chapter and add in the chapter number to the image so it's not text on an image but just an image. I've seen it done that way many times.

Yes, it looks like that is the best route to go. It'll look like it should on any device and is a heck of a lot easier to accomplish.

[theducks]

I've done this to reduce the file size caused by Image Per Chapter
Use absolute values otherwise resize (zoom) by the user moves the text.

 <div class="heading" id="chapter-008-heading">

      <div class="heading-image-size-container">

        <img height="120" alt="" src="../Images/orobus.jpeg" width="117" />

      </div>

      <h1 class="title">8</h1>

    </div>

CSS

.title {
   margin-top: -90px;
   font-size: 28pt;
   /* -2em; */
}

This is still a bit fragile due to how the different DEVICE render things (do their own ignore the spec) Looks good on my Kobo, but vertical placement seems to wander on my K4

[JSWolf]

Originally Posted by BookWalker

Yes, it looks like that is the best route to go. It'll look like it should on any device and is a heck of a lot easier to accomplish.

One other thing, don't have too much blank space at the top of the page for the eBook. This is an eBook and not everything that works for a pBook works for an eBook. 1em is is a good amount of top space for a chapter header.

[BookWalker]

Originally Posted by JSWolf

One other thing, don't have too much blank space at the top of the page for the eBook. This is an eBook and not everything that works for a pBook works for an eBook. 1em is is a good amount of top space for a chapter header.

Thanks for pointing that out!