Background Colors or Images

bbacle · 07-15-2022, 05:21 PM

Is there a way when creating an ebook that I can have a background color or image behind my text?

DiapDealer · 07-15-2022, 05:38 PM

Moving this to the EPUB forum as it's not Sigil specific at all.

Martinoptic · 07-15-2022, 05:47 PM

Take a look at Roy Glashan’s library of Epubs and look at the code he uses to give background colour - https://freeread.com.au/

RbnJrg · 07-15-2022, 06:53 PM

Quote:

Originally Posted by bbacle

Is there a way when creating an ebook that I can have a background color or image behind my text?

There are several ways to get what you want. One way is to put an image as background for the <body> (or the <div> or <p> tag that you want) with the following code:

1. In your .xhtml file:

Code:

<body class="back">
    <p>Your text here...end of your text</p>
</body>

2. In your .css stylesheet write:

Code:

.back {
    background: url("path_to_your_image_here") center center no-repeat;
    background-size: cover; 
}

In place of "center center" you can set another position, for example "0 0", "0 50%", etc., etc. And instead of "background-size: cover" you can use another measures, like % (background-size: 50%), em (background-size: 5em), etc., etc.

However, not all ereaders support a background image. For example the ereader Overdrive, so far, it doesn't do it (I suppose is due to a bug).

In those cases, you could try working with the properties "position: realtive" and "z-index" and positioning image and text with the "top" and "left" properties, something like this:

Code:

  <p class="first"><img alt="" src="path_to_your_image_here" width="100%"/></p>

  <p class="second">Your text here...end of your text</p>

and

Code:

.first {
    position: relative;
    z-index: 0;
    left: 0;
    top: 0;
}

.second {
    position: relative;
    z-index: 1;
    left: 0;
    top: -XXXpx; /* where XXX is the height in px of your image */
}

But again, not all ereaders support well "position: relative". In fact, there are more chances that an ereader supports properly the "background" property, than it supports "position: relative".

Finally, the last method that I know, is by using a negative margin-top:

Code:

  <p><img alt="" src="path_to_your_image_here" width="100%"/></p>

  <p class="text_over">Your text here...end of your text</p>

and

Code:

.text_over {
   margin-top: -XXXpx; /* where XXX is the height of your image */
}

but the issue with this technique, is that when the user changes the font size, the sync between image and text can be lost (especially when the text is much). So, you'll see what way is better for what you are seeking.

For the case of a background color, that is elementary, just create a class like:

Code:

.red {
     background: red; /* or #ff0000 or rgb(255, 0, 0) */
}

and use it:

Code:

  <p class="red">Your text here...end of your text</p>

Quoth · 07-16-2022, 08:24 AM

But consider if it's a good idea. Usually it's not.

Turtle91 · 07-16-2022, 08:29 AM

I am working on a series of books now (web blog type) where the author chose to use font color for different speakers/meanings. It works well when you have a darker background but some of the lighter colors are almost unreadable if you have a white background so I had to force the background to a darker color using the <body> tag.

CSS:

Code:

body {background-color:black}

Normally I would change the font to some other method of differentiating the speaker, but the color actually helped in the story telling so I used the body background-color work-around.
It worked fine on my device, but it is definitely NOT recommended on an e-ink because it tends to make it almost unreadable. Maybe look at some media queries to handle this.
Also, I'm not sure if Amazon has a rule against putting a color in the <body> like they do with the font??? You may want to check that as well.

However, even if you put that styling in there the device/app might not honor the publishers CSS... some of them ignore it completely in favor of their internal styling, some will ignore parts of the CSS. If you want to "force" the background-color you can put it as an inline style (not something I normally recommend doing...it makes my tummy curdle just thinking of it...) on just the body/div/p you really need using:

Code:

<body style="background-color:black">
<div style="background-color:black">
<p style="background-color:black">

....please use inline styling rarely, if ever...

JSWolf · 07-16-2022, 04:45 PM

If there's a chance this ePub will be read on an eInk screen, don't do it with a background color or image. It will most likely not work well.

Tex2002ans · 07-18-2022, 04:32 PM

Quote:

Originally Posted by bbacle

Is there a way when creating an ebook that I can have a background color [...] behind my text

Yes, you'll want to use the background-color CSS:

HTML:

Code:

<div class="red">
	<p>This is going to have a red background.</p>
</div>

<p class="blue">This is a blue background too.</p>

CSS:

Code:

div.red {
	background-color: red;
}

p.blue {
	background-color: blue;
}

Quote:

Originally Posted by Quoth

But consider if it's a good idea. Usually it's not.

Yes, I agree.

It would be good to know WHY bbacle is trying to get a color/image as the background... then we can give more details.

Quote:

Originally Posted by bbacle

Is there a way when creating an ebook that I can have [...] image behind my text?

Putting images behind text is a horrible idea + very buggy.

For all the details, see this previous discussion:

2021: "Background Image w/ Text on Top"

Quote:

Originally Posted by JSWolf

If there's a chance this ePub will be read on an eInk screen, don't do it with a background color or image. It will most likely not work well.

Agreed. Strongly advise against using colored backgrounds.

If you do use colors, you have to be very careful with contrast between font+background color.

And remember, people do read using things like Night Mode.

For more info on that, see:

2020: "Colored Text, EPUB, Android Dark Mode"

And if you want to see the "colored box" CSS I used way back when, you can see:

2013: "Shaded text box background in epub - broken?"

Not much has changed on that front.

RbnJrg · 07-18-2022, 07:17 PM

Quote:

Originally Posted by Tex2002ans

Yes, you'll want to use the background-color CSS:

HTML:

Code:

<div class="red">
	<p>This is going to have a red background.</p>
</div>

<p class="blue">This is a blue background too.</p>

CSS:

Code:

div.red {
	background-color: red;
}

p.blue {
	background-color: blue;
}

It's not neccesary to employ "background-color"; just writting "background" will work because that it is a shorthand for background-color, background-image, background-size, background: position, background-repeat, etc.; it doesn't matter if one of the values are missing. So, "background: blue" it'll be a shorthand for "background-color: blue"; background: 100%, it'll be a shorthand for "background-size: 100%"; even you can use something like: "background: blue url("path_to_an_image")"; if the image is present, then the image will be showed, but if not, then the color blue will be displayed as background.

Tex2002ans · 07-18-2022, 08:09 PM

Quote:

Originally Posted by RbnJrg

It's not neccesary to employ "background-color"; just writting "background" will work because that it is a shorthand [...]

Hmmm, okay. I wasn't aware of that one.

I tend to avoid many of the shorthands, like margin, and instead specify all 4 margins separately (if needed).

I believe it's more human-readable, instead of having to decipher EXACTLY what variables are what.

Examples from "margin" at MDN:

Code:

/* Apply to all four sides */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

vs. something like:

Code:

blockquote {
	margin-top: 1em;
	margin-bottom: 2em;
}

Whenever I run across the shorthand, especially that 3rd or 4th one, I'm always scratching my head trying to remember which number stands for which variable.

When you have it fully typed out, there's no confusion there.

JSWolf · 07-19-2022, 04:26 AM

Quote:

Originally Posted by Tex2002ans

Hmmm, okay. I wasn't aware of that one.

I tend to avoid many of the shorthands, like margin, and instead specify all 4 margins separately (if needed).

I believe it's more human-readable, instead of having to decipher EXACTLY what variables are what.

Examples from "margin" at MDN:

Code:

/* Apply to all four sides */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

vs. something like:

Code:

blockquote {
	margin-top: 1em;
	margin-bottom: 2em;
}

Whenever I run across the shorthand, especially that 3rd or 4th one, I'm always scratching my head trying to remember which number stands for which variable.

When you have it fully typed out, there's no confusion there.

I agree. I don't like the margin shorthand. It's not as easy to read as it is the full separate margin lines. Also, if I am not mistaken, the nook doesn't like margin. I know it didn't used to like it unless that's since been fixed.

07-15-2022, 05:21 PM	#1
bbacle Junior Member Posts: 8 Karma: 2139376 Join Date: May 2013 Device: none	Background Colors or Images Is there a way when creating an ebook that I can have a background color or image behind my text?

07-16-2022, 08:29 AM	#6
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I am working on a series of books now (web blog type) where the author chose to use font color for different speakers/meanings. It works well when you have a darker background but some of the lighter colors are almost unreadable if you have a white background so I had to force the background to a darker color using the <body> tag. CSS: Code: body {background-color:black} Normally I would change the font to some other method of differentiating the speaker, but the color actually helped in the story telling so I used the body background-color work-around. It worked fine on my device, but it is definitely NOT recommended on an e-ink because it tends to make it almost unreadable. Maybe look at some media queries to handle this. Also, I'm not sure if Amazon has a rule against putting a color in the <body> like they do with the font??? You may want to check that as well. However, even if you put that styling in there the device/app might not honor the publishers CSS... some of them ignore it completely in favor of their internal styling, some will ignore parts of the CSS. If you want to "force" the background-color you can put it as an inline style (not something I normally recommend doing...it makes my tummy curdle just thinking of it...) on just the body/div/p you really need using: Code: <body style="background-color:black"> <div style="background-color:black"> <p style="background-color:black"> ....please use inline styling rarely, if ever... Last edited by Turtle91; 07-16-2022 at 08:36 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Different colors für Background and Page	GeorgiusT	Viewer	2	10-05-2021 10:58 AM
Color of background makes colors hard to see	ChipAHoy	Library Management	1	01-14-2021 10:49 PM
Troubleshooting New to Kindle...can I invert the text/background colors?	sydmalicious	Amazon Kindle	9	03-13-2020 05:42 PM
Change the background colors of the columns?	slg-bug	Library Management	2	07-08-2016 03:50 PM
Can not convert epub background and foreground colors to AZW3	ronaldl	Conversion	1	01-14-2014 09:53 PM

07-15-2022, 05:38 PM	#2
DiapDealer Grand Sorcerer Posts: 27,548 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Moving this to the EPUB forum as it's not Sigil specific at all.

07-15-2022, 05:47 PM	#3
Martinoptic Bibliolater Posts: 4,762 Karma: 2600000 Join Date: Dec 2021 Location: England Device: none	Take a look at Roy Glashan’s library of Epubs and look at the code he uses to give background colour - https://freeread.com.au/

07-16-2022, 08:24 AM	#5
Quoth the rook, bossing Never. Posts: 11,154 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	But consider if it's a good idea. Usually it's not.

07-16-2022, 04:45 PM	#7
JSWolf Resident Curmudgeon Posts: 73,957 Karma: 128903250 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	If there's a chance this ePub will be read on an eInk screen, don't do it with a background color or image. It will most likely not work well.