[RbnJrg]

Originally Posted by Stephaan

Hello,

I'm new to Sigil and I'm trying to create an e-pub for the book that my daughter made. It contains a lot of images and I'm having trouble to get the text near and in front of the image. In the attachment you will see a left top corner image and the text beneath it although the text should be like attachment 2. I more or less can get it done in Sigil playing aroung with the positioning (margin-top/margin left) but when I look at the result in my e-pub viewer (adobe digital editions), the image is not what it looked like in Sigil.

Can anyone point me in the right direction?

thanks in advance
Stephaan

Do the following:

1. In your stylesheet.css file, write:

.back_img {
    background: url("../Images/Background.png") 0 0 no-repeat;
    background-size: contain;
    height: 200px;
    text-align: center;
    font-size: 1.2em;
    padding: 1.5em 2em;
}

2. In your .html file write:

<div class="back_img">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>

    <p>Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>
</div>

After that you'll get something like the screenshot below. This method also works in ADE I attach the respective .ePub

Regards
Rubén

PS: In my example I'm using as background a .png image of 222 x 259px. Of course, you'll use your proper image with the size of your convenience since the property "background-size: contain;" will do almost all the work