Calibre reader CSS for background image help

[Vortex]

A friend asked me to set up their Calibre reader the same as I have mine with a background image, I use it on 3 different screens and it works OK but on my friends new laptop the background image wont fill the screen. I've tried all sorts of CSS to try and force it but it wont go any bigger, the CSS I'm using is:

body {color:rgb(80,58,34);
background-color:rgb(174,174,174);
background-image:url("file:///C:/Program Files/Calibre2/resources/images/Back.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;}

Is this happening because his screen resolution is bigger than the image, can it be stretched or do I need a bigger image for his?

[BetterRed]

@vortex - did you try what's in here ==>> http://www.cre8ivecommando.com/css-b...-stretch-1786/

BR

[theducks]

Originally Posted by Vortex

A friend asked me to set up their Calibre reader the same as I have mine with a background image, I use it on 3 different screens and it works OK but on my friends new laptop the background image wont fill the screen. I've tried all sorts of CSS to try and force it but it wont go any bigger, the CSS I'm using is:



Is this happening because his screen resolution is bigger than the image, can it be stretched or do I need a bigger image for his?

Slightly

When you make a custom use of a Calibre resource:
Put a copy of the desired resource into the Resources folder within the Calibre Configuration Folder.

1) Calibre will check and USE those (overrides the current ones) before using the current ones from the Calibre Program folder

2)Items within this folder do not get replaced with new files during a program UPDATE.

[Vortex]

So Ducks, your saying it would be better in "C:/Program Files/Calibre2/resources/" rather than "C:/Program Files/Calibre2/resources/images/" ?

BR, I tried that and it just moves the image to the top right hand corner. The image is 1038 X 776 and his screen resolution is 1900 X 1200, the 100% refers to the image size not the screen, to test this I just switched the background image for a ramdom photo with a higher res than 1900 X 1200 and it fills the screen fine with my original CSS. I'd better get the scanner fired up and dig out that old book I used and make a higher res background image for him.

[PeterT]

No... you want the CONFIGURATION folder NOT the PROGRAM folder.

Go to Calibre | Preferences | Miscellaneous | Open calibre configuration Directory

On Windows this is probably the same location as %appdata%\calibre

[theducks]

What PeterT said
Images would be where you would place an a: Alternate Trashcan icon.
Calibre will look at resources/images FIRST
if the file it wants for the UI, exists there, it uses that one.: else, it uses the Programs/resources/images one.

(user)Plugins always use the configuration folder

the calibre2 folder is 'Vanilla Calibre'
the configuration folders are the added 'Toppings'

[Vortex]

OK, there is no folder called resources in there so I take it I have to create one?

I've created a 1900 X 1200 background image which works on the high res screen. Is it possible in the CSS to get the image to scale to the reader window even when it's not full screen? At the moment I have it centered so the middle of the book stays in the middle but it looses the edges unless full screen.

Also is there a thread where people share their reader background images?

[theducks]

Originally Posted by Vortex

OK, there is no folder called resources in there so I take it I have to create one?

I've created a 1900 X 1200 background image which works on the high res screen. Is it possible in the CSS to get the image to scale to the reader window even when it's not full screen? At the moment I have it centered so the middle of the book stays in the middle but it looses the edges unless full screen.

Also is there a thread where people share their reader background images?

Yes Creating the folder may be necessary
(BTW there is a Calibre FAQ in this folder)

Don't know about scale. The few backgrounds I used were (even) so they could tile if needed.

nice idea. Start a thread if you have a few to seed it with

Be aware that all images must be Public Domain or licensed under the GNU General Public License (we had a 'Covers thread' that some images were questioned.)
Have fun

[BetterRed]

Originally Posted by Vortex

So Ducks, your saying it would be better in "C:/Program Files/Calibre2/resources/" rather than "C:/Program Files/Calibre2/resources/images/" ?

BR, I tried that and it just moves the image to the top right hand corner. The image is 1038 X 776 and his screen resolution is 1900 X 1200, the 100% refers to the image size not the screen, to test this I just switched the background image for a ramdom photo with a higher res than 1900 X 1200 and it fills the screen fine with my original CSS. I'd better get the scanner fired up and dig out that old book I used and make a higher res background image for him.

I'm no expert at this stuff but using this example ==>> http://www.w3schools.com/cssref/tryi...ckground-size2 the flowers will stretch as I add more text and it will adjust itself when I resize my Firefox browser (gecko), I don't have a webkit browser which is what calibre uses, but it also does the same in Chrome (blink), don't imagine webkit would be any different.

On windows put your images in this folder %APPDATA%\calibre\resources\images, if it doesn't exist then create it.

BR

[DoctorOhh]

Originally Posted by Vortex

Is this happening because his screen resolution is bigger than the image, can it be stretched or do I need a bigger image for his?

Add this line.

background-size:100% 100%;

Update: Upon closer reading this is exactly what BetterRed said in the post directly above.

[Vortex]

Originally Posted by BetterRed

I'm no expert at this stuff but using this example ==>> http://www.w3schools.com/cssref/tryi...ckground-size2 the flowers will stretch as I add more text and it will adjust itself when I resize my Firefox browser (gecko), I don't have a webkit browser which is what calibre uses, but it also does the same in Chrome (blink), don't imagine webkit would be any different.

On windows put your images in this folder %APPDATA%\calibre\resources\images, if it doesn't exist then create it.
BR

That works perfect, thanks BR

The only calibre folder under APPDATA was in the roaming folder so I had to create the whole folder tree, so now I have:

body {color:rgb(80,58,34);
background-color:rgb(174,174,174);
background-image:url("file:///C:/Users/-/AppData/calibre/resources/images/Back.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}

[BetterRed]

Originally Posted by Vortex

That works perfect, thanks BR

The only calibre folder under APPDATA was in the roaming folder so I had to create the whole folder tree, so now I have:

Aaaagh - I think maybe you use portable

If you are then put your images in ..\Calibre Portable\Calibre Settings\resources\images

Sorry for the bum steer - but at least you friend got a pretty viewer

BR

[Vortex]

I spoke to soon there, it works if I open ebook-viewer.exe but if I open a book from within calibre the background image has no right hand edge and looks like it's stretched way off on that side of the screen. The CSS is identical in both, any idea why it's doing this...?

I'm not using portable now, so your previous advice was sound, BR

[BetterRed]

@Vortex - another shot in the dark, what is the default output device - I know that it's in Preferences->Conversion->Common Options->Page Setup, it may be elsewhere too

Try setting it to Tablet, you may have to do a conversion (epub2epeb maybe) too

Problem is - what happens if you send it to a nook or a kobo or something - I've no idea.

BR

[DoctorOhh]

Originally Posted by Vortex

I spoke to soon there, it works if I open ebook-viewer.exe but if I open a book from within calibre the background image has no right hand edge and looks like it's stretched way off on that side of the screen. The CSS is identical in both, any idea why it's doing this...?

I'm not using portable now, so your previous advice was sound, BR

I followed your lead and put the following in in my stylesheet and the background works great for my epubs when launched from Calibre's GUI.

body { background-image:url("https://dl.dropbox/.../bigback.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center
}