Controlling background image size

[RJP_Home]

Why does this paragraph look like this in PDF preview:

Preview.png

but like this in the actual PDF, with the background image much larger than it is supposed to be:

PDF Output.png

Here is the relevant (I think) section of the stylesheet. I write the note and then apply the NotesIcon class to the paragraph. The actual size of the Notes_Icon.png is shown as 20 x 20 pixels in Flare. I don't think the background-size parameter is honored in PDF output as I can put any number I want in there and the result is the same.

Code: Select all

p.NotesIcon
{
	background-color: white;
	background-image: url(C:\(redacted)\Content\Resources\Images\Notes_Icon.png);
	background-position: 9px 5px;
	background-repeat: no-repeat;
	background-size: 20px;
	border: solid 2px #3498db;
	border-left: solid 4px #3498db;

[Psider]

Yeah some CSS isn't supported by PDF generators, and this seems like this is one of them. The generators seem to be black boxes for supported properties though, so it's a bit trial and error.

One thing you could try is also specifying the width, in case it's just the 'auto' height value that isn't understood.

Or try a test page that just has an element with a background image and size specified, and nothing else, to see what happens then.

[AlexFox]

No guarantee but I have noticed that sometimes PDF output prefers CSS shorthand instead of explicit declarations so you could try that:

Code: Select all

p.NotesIcon
{
	background: url(C:\(redacted)\Content\Resources\Images\Notes_Icon.png) no-repeat 9px 5px/20px white;
}

[RJP_Home]

Thanks for all the suggestions, I'll give them a try and report back.