Controlling background image size

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.
Post Reply
RJP_Home
Propeller Head
Posts: 20
Joined: Wed Feb 17, 2021 8:33 pm

Controlling background image size

Post by 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;
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 860
Joined: Wed Jul 06, 2011 1:32 am

Re: Controlling background image size

Post by 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
Sr. Propeller Head
Posts: 246
Joined: Thu Oct 19, 2017 1:56 am

Re: Controlling background image size

Post by 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
Propeller Head
Posts: 20
Joined: Wed Feb 17, 2021 8:33 pm

Re: Controlling background image size

Post by RJP_Home »

Thanks for all the suggestions, I'll give them a try and report back.
_[shapeonthewall]_
Propeller Head
Posts: 14
Joined: Tue Nov 19, 2019 9:01 am
Location: Scotland

Re: Controlling background image size

Post by _[shapeonthewall]_ »

I found this thread while looking for a solution to a problem that's similar to the one in this thread. My problem was that the PDF output was repeating a background icon twice. Not more than twice, though.

I tried replacing the background properties that were specified individually with the shorthand - and it worked.
Flare 2024 bound to Azure Git via Visual Studio Code
AlexFox
Sr. Propeller Head
Posts: 246
Joined: Thu Oct 19, 2017 1:56 am

Re: Controlling background image size

Post by AlexFox »

_[shapeonthewall]_ wrote: Wed Jun 05, 2024 3:45 am I found this thread while looking for a solution to a problem that's similar to the one in this thread. My problem was that the PDF output was repeating a background icon twice. Not more than twice, though.

I tried replacing the background properties that were specified individually with the shorthand - and it worked.
Awesome, glad it worked for you!
Post Reply