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>