View Full Version : title page & background images


Nate the great
07-27-2009, 09:27 PM
Lately I've been thinking up interesting things that can be done with ebooks. This evening I realized that one can add detail to a page by using a frame image (like this (http://graphicssoft.about.com/od/freedownloads/ss/styleframes.htm)) as a background image. This could be very useful for a title page, or any other page with a limited amount of text and a relatively fixed layout.

I think it would be best to use images that are already screen size (600x800). I provided a link to some frames that are. Are there any graphic designers here who would like to make more?

Neat idea, huh?

kovidgoyal
07-27-2009, 09:30 PM
IIRC ADE doesn't support all the CSS 2 .1 background properties, so you may not have much luck with this. Though maybe the newer ones do.

nrapallo
07-27-2009, 09:41 PM
I've never had success using a background image for just a page with overlay text thereon, for my .imp ebooks or conversions.

It's usually the background image first, then followed by the text, not on top of the image.

It's all about positioning and when rendering html in a top-down design, that linear nature seems to be the only model understood by our ebook creating programs.

Sure, you can try absolute positioning. That's the only way I've seen .pdf conversions to .html done (visually) accurately (with text), but it's a whole new ball game for ebooks creating programs to render and match. I think this is one of the reasons .pdf to .html never converts layouts well.

Been there and now use PDFRead when I can't win! ;)

Just my two cents. :)

carlobee
07-27-2009, 09:47 PM
oh. i still don't know how to do this. :(

Nate the great
07-27-2009, 09:54 PM
IIRC ADE doesn't support all the CSS 2 .1 background properties, so you may not have much luck with this. Though maybe the newer ones do.

I just tested it. It doesn't quite work right in the calibre ebook-viewer or Adobe DE. But it works well enough that I think the problem is caused by my limited knowledge of css+html.

Would any of our more experienced members like to take a shot?

Jellby
07-28-2009, 05:01 AM
I think it would be best to use images that are already screen size (600x800). I provided a link to some frames that are. Are there any graphic designers here who would like to make more?

Not all screens are 600800, desktop readers can resize the screen at will, there can be margins or status bars, the orientation can be portrait or landscape... in a couple of years we could all be enjoying 12001600 screens... I would say it's a nice idea but maybe too dangerous...

How about coding the frame or title page in SVG? That could be more device- and future-proof.

Nate the great
07-28-2009, 07:54 AM
Not all screens are 600800, desktop readers can resize the screen at will, there can be margins or status bars, the orientation can be portrait or landscape... in a couple of years we could all be enjoying 12001600 screens... I would say it's a nice idea but maybe too dangerous...

How about coding the frame or title page in SVG? That could be more device- and future-proof.

Sounds good. Do yuo want to give it a try?

Jellby
07-28-2009, 09:13 AM
Sounds good. Do yuo want to give it a try?

Hmm... I don't think I can yet, I'd need some serious SVG experience first :D

The kind of frame you showed would be hard, I guess. The number and size of the "features" in the frame would have to be altered depending on the page size, and I don't know if it can be done, it's not simple stretching or cutting.

Nate the great
07-28-2009, 09:19 AM
Hmm... I don't think I can yet, I'd need some serious SVG experience first :D

The kind of frame you showed would be hard, I guess. The number and size of the "features" in the frame would have to be altered depending on the page size, and I don't know if it can be done, it's not simple stretching or cutting.

Until I found that set of frames I was planning to suggest a very simple line frame with optional beveled corners and other relatively simple features.

Jellby
07-28-2009, 10:56 AM
Until I found that set of frames I was planning to suggest a very simple line frame with optional beveled corners and other relatively simple features.

That should be possible with good ol' CSS (http://www.tizag.com/cssT/border.php).

nrapallo
07-28-2009, 12:15 PM
That should be possible with good ol' CSS (http://www.tizag.com/cssT/border.php).

First attempt attached!

Can it be improved?

Nate the great
07-28-2009, 01:50 PM
That should be possible with good ol' CSS (http://www.tizag.com/cssT/border.php).

That's too basic. There's a lot you can't do.

Jellby
07-28-2009, 02:03 PM
That's too basic. There's a lot you can't do.

Of course, I was referring to the "simple line frame with bevelled corners".

How about this (http://www.bigbaer.com/css_tutorials/css.border.image.frame.styles.htm)?

Or this (http://www.punteney.com/writes/any-size-image-frame-css/).

Or maybe something of what's shown here (http://www.cssjuice.com/25-rounded-corners-techniques-with-css/).

Nate the great
07-28-2009, 04:38 PM
Of course, I was referring to the "simple line frame with bevelled corners".

How about this (http://www.bigbaer.com/css_tutorials/css.border.image.frame.styles.htm)?

Or this (http://www.punteney.com/writes/any-size-image-frame-css/).

Or maybe something of what's shown here (http://www.cssjuice.com/25-rounded-corners-techniques-with-css/).

See, I told you I don't now much css.