MobileRead Forums

MobileRead Forums (https://www.mobileread.com/forums/index.php)
-   ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)
-   -   How to stretch background image full screen? (https://www.mobileread.com/forums/showthread.php?t=341404)

peace19812006 08-25-2021 01:19 AM
How to stretch background image full screen?
 
1 Attachment(s)
I am trying to use the image as background for the book. I use CSS like this:
div.img {
background-image: url(../images/4444.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
However, the image cannot be stretched full width. See the picture below. I don't want to see white color in this image. How can I fix that? Thanks!

Turtle91 08-25-2021 11:22 AM
If you are placing it in a <div> then it will only fill the div (the parent container). The div probably has some kind of margins to make it smaller than the window. If you want to fill the whole page you need to apply it to the body or html.


Welcome to MR!

peace19812006 08-25-2021 11:23 PM
Quote:
Originally Posted by Turtle91 (Post 4149095)
If you are placing it in a <div> then it will only fill the div (the parent container). The div probably has some kind of margins to make it smaller than the window. If you want to fill the whole page you need to apply it to the body or html.


Welcome to MR!
Thanks bro!

peace19812006 08-25-2021 11:43 PM
Quote:
Originally Posted by Turtle91 (Post 4149095)
If you are placing it in a <div> then it will only fill the div (the parent container). The div probably has some kind of margins to make it smaller than the window. If you want to fill the whole page you need to apply it to the body or html.


Welcome to MR!
I tried to use it. It's okay for background-color. However, I cannot use background-image in it.

MicroDrie 08-26-2021 06:57 PM
Quote:
Originally Posted by peace19812006 (Post 4149004)
I am trying to use the image as background for the book. I use CSS like this:
div.img {
background-image: url(../images/4444.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
However, the image cannot be stretched full width. See the picture below. I don't want to see white color in this image. How can I fix that? Thanks!
As Turtle91 already wrote, you <div> have a margin. By adding the same margin value negatively in your <div.img> you cancel this margin. To give the text a certain margin like 10px, put it in this new margin like this CSS command.
Code:
div.img {
  margin: -10px; /* use full width */
  background-image: url(../images/4444.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
div.img p {
  margin: 10px; /* Move text to original location */
}

Tex2002ans 08-27-2021 02:53 AM
Quote:
Originally Posted by peace19812006 (Post 4149004)
I am trying to use the image as background for the book.

[...]

How can I fix that? Thanks!
What reader are you using/testing on?

And is this background image just for your personal usage? Or are you trying to sell this ebook?

If selling, I'd strongly recommend against any background images. They don't work reliably + cause more harm. For more details, see mine + Hitch's answers in:

2021: "Background Image w/ Text on Top"

Hitch 08-27-2021 10:25 AM
Quote:
Originally Posted by Tex2002ans (Post 4149506)
What reader are you using/testing on?

And is this background image just for your personal usage? Or are you trying to sell this ebook?

If selling, I'd strongly recommend against any background images. They don't work reliably + cause more harm. For more details, see mine + Hitch's answers in:

2021: "Background Image w/ Text on Top"
Not to mention, but afaik, there are nearly zero devices that support full-bleed imagery in eBooks, other than (possibly) the cover. Isn't that the gist here? S/he wants full-bleed, edge-to-edge, or have I misread?

Hitch

Quoth 08-27-2021 11:26 AM
Quote:
Originally Posted by Hitch (Post 4149547)
Not to mention, but afaik, there are nearly zero devices that support full-bleed imagery in eBooks, other than (possibly) the cover. Isn't that the gist here? S/he wants full-bleed, edge-to-edge, or have I misread?

Hitch
I think you are right on both counts.

And on some cases you need a per model margin with negative pixels. Backgrounds in a document rather than a "desktop" or "Home page", except on rare occasions are a disaster on anything. Terrible on web, paper, apps, programs or ebooks.

RbnJrg 08-27-2021 01:29 PM
4 Attachment(s)
Quote:
Originally Posted by Hitch (Post 4149547)
Not to mention, but afaik, there are nearly zero devices that support full-bleed imagery in eBooks, other than (possibly) the cover. Isn't that the gist here? S/he wants full-bleed, edge-to-edge, or have I misread?
Hi Hitch;

On the Android world, you have Readily, Lithium and PocketBook that support zero-bleed imagery (any page, not only the cover). I'm speaking about epub3 and by adding the background image at the <html> level, something like:

Code:
html {
  background: url("../Images/bg_paper1.jpg") no-repeat center center;
  background-size: cover;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
/* This declaration shouldn't be neccesary except by PocketBook */
  background-color: transparent;
}
The plugin BibiReader for Sigil, also can show background images with zero bleed. Here you can watch some screenshots (one and two pages view), with a background image that mimics an old paper (as I said, also is possible to get the same result with Readily, Lithium and PocketBook):

Attachment 188948 Attachment 188949 Attachment 188950

But one thing is that it is possible to include a background image (with many limitations) and another thing is that it is a good idea. I would never include such kind of images.

Hitch 08-27-2021 01:46 PM
Quote:
Originally Posted by RbnJrg (Post 4149621)
Hi Hitch;

On the Android world, you have Readily, Lithium and PocketBook that support zero-bleed imagery (any page, not only the cover). I'm speaking about epub3 and by adding the background image at the <html> level, something like:

Code:
html {
  background: url("../Images/bg_paper1.jpg") no-repeat center center;
  background-size: cover;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
/* This declaration shouldn't be neccesary except by PocketBook */
  background-color: transparent;
}
The plugin BibiReader for Sigil, also can show background images with zero bleed. Here you can watch some screenshots (one and two pages view), with a background image that mimics an old paper (as I said, also is possible to get the same result with Readily, Lithium and PocketBook):

Attachment 188948 Attachment 188949 Attachment 188950

But one thing is that it is possible to include a background image (with many limitations) and another thing is that it is a good idea. I would never include such kind of images.
Yes, but Ruben:

You're talking browser- or desktop-software based readers. I'm talking DEVICES. (Kindles, Fires, Nooks, Kobos, and the like.) And as far as I know...full-bleed really isn't supported on the major (or minor) devices.

I'm not arguing that some effects are lovely--they are. But for the poster's purposes, I tend to assume that s/he is trying to use the coding for commercial purposes.

Hitch

RbnJrg 08-27-2021 02:43 PM
Quote:
Originally Posted by Hitch (Post 4149626)
I'm talking DEVICES. (Kindles, Fires, Nooks, Kobos, and the like.) And as far as I know...full-bleed really isn't supported on the major (or minor) devices.
No, so far I don't know any device that has support for display images (except for covers) without bleed. Just apps, and so far, only *THREE*. Maybe in a future we'll be able to think of an e-ink reader with such feature.


All times are GMT -4. The time now is 09:32 PM.

Powered by: vBulletin
Copyright ©2000 - 3.8.5, Jelsoft Enterprises Ltd.
MobileRead.com is a privately owned, operated and funded community.