View Single Post
Old 11-28-2013, 07:51 PM   #40
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,849
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Psymon View Post
And my english is very good... but sometimes I don't explain myself very well!

My apologies if I didn't explain myself very well. Firstly, though, thanks for the tip re display:none for my <h1> tags! I should have thought of that myself, but for some reason I thought I wasn't allowed to put anything else on the page other than what was in those <svg> tags (don't ask me why I thought that -- I think that was an assumption I made based on something funny happening when I did that on pages with full-size images).

In any case, though, while I was really happy with the way those SVG title pages looked when they were done, they were also a lot more complicated to edit -- and that's in addition to my not being able to put the <h1> tags in them (which you resolved now, of course).
Well, then we must suppose that the svg method works for you


Quote:
So for both those reasons, I was thinking of trying what you'd said was "better" anyway, i.e. not doing it the SVG way, and instead doing it just with CSS (background-image), using/modifying the code you'd posted here earlier.

I couldn't seem to get it to work with this image (see attachment), though. Basically -- if at all possible -- I was hoping to have this image as my full-page background image, and then my chapter title + flower ornament + author tags (<h1> + <img> + <h2>) overtop that. And while I'm at it, if these latter could have margins set as a percentage, that would be great, as I could easily have all the text stay within the "frame" in the background image, regardless of orientation or size.
Ah, ah, ah. We have a problem here You can have a background image with text over it but troubles appear when you want all the text stay within the background image. We have a problem because ADE doesn't support the properties to achieve that. See this post:

https://www.mobileread.com/forums/sho...43&postcount=4

As you can see, the text remain in same page, no matter if the device is in portrait or landscape mode. But that technique only works for Kindle and iPad; you can't get that output in ADE and on ereaders based on ADE So is as it looks in my K4NT:

Portraid mode:
Click image for larger version

Name:	screen_shot-31266.gif
Views:	319
Size:	59.0 KB
ID:	115919

Landscape mode:
Click image for larger version

Name:	screen_shot-31267.gif
Views:	332
Size:	38.2 KB
ID:	115920

Below you can see the respective ePub.

But if you want all the text stay within the background image no matter the device and the device's orientation, then the easiest thing is to write the text directly over the background image, as Alex made. The alternative is to use svg.

Quote:
All of this has been really great, Rubén! I don't quite understand that SVG code...
You can learn about SVG by reading this tutorial:

http://commons.oreilly.com/wiki/inde...SVG_Essentials

In the Chapter 8 of this tutorial, you can learn how to manage text.

Of course, once you know about SVG, the more probable thing is that you don't want to write the SVG code by hand but using -for example- Inkscape

Quote:
It'd be nice to know/understand the other CSS way, too -- then I'd have two options to choose from for now and any future projects.
Well, you can find a lot of tutorials about html and css in the web. Believe me, is not a so difficult matter; in a couple of weeks you'll know enough to understand all the code posted in this forum

Regards
Rubén
Attached Files
File Type: epub background_image_test_ruben II.epub (105.3 KB, 287 views)
RbnJrg is offline   Reply With Quote