Forum Bugs

Background image styled "background-repeat: no-repeat" repeats in a div with 2 columns

markhicks
I have a div styled with 2 columns.
In the div is a paragraph that is styled to begin with a small background image
The background image is styled to "no-repeat".
The paragraph begins in the first column and then breaks into the second column
In a Chrome browser, the image appears in column 1 only.
In a PrinceXML (version 13.5) PDF, the image is repeated at the start of the text in column 2.

Can you help with a workaround? Will an update to v15 fix this?

Also, I have never understood how to inspect the rendered code from PrinceXML. Let me know how to find this. Thanks!

HTML:
<div class="tu-bible-passage-text">
<p class="tu-image-affirmation"> Let us, then .... (this text begins in column 1 and ends in column 2)

CSS:
.tu-bible-passage-text {
text-align: justify;
text-indent: 20px;
column-count: 2;
hyphens: none;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}
.tu-image-affirmation {
padding: 0px 0px 0px 25px;
background-image: url("../wings-common-files/affirmation.gif");
background-repeat: no-repeat;
text-indent: 0px;
}
  1. 2024-11-08-support-request-document-bizmark-development.jpg974.3 kB
mikeday
You can apply `box-decoration-break: slice` to ensure that borders, paddings, and backgrounds are not repeated on fragmented boxes. This is a little confusing given the interaction with no-repeat, but it is consistent with the behaviour described in the CSS specification:

https://drafts.csswg.org/css-break/#break-decoration
markhicks
Thank you. You rock.