How to stretch background image full screen?

[peace19812006]

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]

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]

Originally Posted by Turtle91

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]

Originally Posted by Turtle91

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]

Originally Posted by peace19812006

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.

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]

Originally Posted by peace19812006

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]

Originally Posted by Tex2002ans

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]

Originally Posted by Hitch

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]

Originally Posted by Hitch

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:

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



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]

Originally Posted by RbnJrg

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:

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]

Originally Posted by Hitch

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.