Reading Backgrounds For Epub

[zeoint]

Type of reader (if reader related)

epub

Description of the new feature / enhancement

1. Please provide a way to add an Image as the wallpaper behind the text while reading epub's.

• Zooming in/out on text doesn't change the zooming on the background image as its only a wallpaper.

2. A slider/value to change the blur intensity of the background image.

• Also a slider/value to change the brightness and contrast of the background image.

3. Please check the attached image or webnovel app.

Scenario when this would be used?

While reading epub's.

Supporting information

No response

[mienaiyami]

Im stuck on some issue while trying to improve the app so updates have been delayed.
Will start working on it when I have enough time and relaxed brain to fix the issue hindering whole progress.

[zeoint]

Cool.

[zeoint]

epub

Description of the new feature / enhancement

1. Please provide a way to add an Image/texture/etc as the wallpaper behind the text while reading epub's.
2. A slider/value for the blur intensity of the background image.
3. Please check the attached image or webnovel app.

1. Please provide a way to add an Image as the wallpaper behind the text while reading epub's.

• Zooming in/out on text doesn't change the zooming on the background image as its only a wallpaper.

2. A slider/value to change the blur intensity of the background image.

• Also a slider/value to change the brightness and contrast of the background image.

3. Please check the attached image or webnovel app.

[mienaiyami]

@zeoint
While it will take time to start, you can have this working in few minutes with custom stylesheet option.
You can use some ai tool like chatgpt to ask question over it, or just ask me.

Create new text file and rename it to style.css (must remove .txt from end) and save this then use custom stylesheet option inside the app.

body #app #EPubReader section.main{
    /* this is color of background over image; */
    background-color:rgba(0,0,0,0.8);
    /* blur over image; */
    backdrop-filter:blur(10px);
}
body #app .reader{
    /* location of image */
    background-image: url("D:/w/Untitled3.png");
    /* size of image */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

If you are already some stylesheet, just edit that with notepad and add this to end of it.
Feel free to ask for help.
The actual feature might take a long time before getting implemented.

[zeoint]

Cool. Take your time.
It works like a charm.
Thank You.