Hello,
I am using Ultimate PDF and want to add a full-page background image on every page. Currently, the image only appears in the margin area instead of covering the full page (I have added custom margin CustomMarginSize(1,1,1,1)). I added the image inside a background placeholder, but it doesn’t position correctly. How can I properly set a full-page background image for all pages?”
I refer this post:
https://www.outsystems.com/forums/discussion/78020/ultimate-pdf-how-to-add-full-page-background-image-in-every-page/
but not working. Please help
hi @Sherif El-Habibi
Thank you for your response. The issue was caused by some existing CSS in my project that was affecting Ultimate PDF rendering. After adjusting the conflicting CSS, the PDF is now working correctly with the full-page background image.
Of course, here you go.
Have you tried to give the image in the Style Classes "full-height" ?
Hi @Sherif El-Habibi
In service studio if you add image displayed in full height image. but in browser pdf generate then issue.
Thanks
I’m not sure if this is the same issue you encountered, but after I added the full-height class, the PDF downloaded with the image covering the entire page. I’ve attached the PDF generated using the full-height class.
You can add some content inside the Main content placeholder and footer placeholder and check. Because you added only image.
I added random text to the content, header, and footer, and the PDF was still generated with the image covering the entire page. Check the attached PDF.
Can you please share your oml file? I tried but not working
Glad it’s fixed. You’re welcome anytime.
Hi Rupesh,
If you want a true full-page background on every page, the safest approach is to place the image in the PrintLayout → Background placeholder and force it to cover the full page with CSS (instead of relying only on margins / container sizing).
Put the Image inside Background (not MainContent), inside a Container
Set page margins to 0 (or keep your CustomMarginSize, but then add padding to MainContent instead of using margins for the “frame”)
Use CSS like this:
/* Container that holds the background image */
.pdf-bg {
position: fixed; /* makes it repeat per page in print engines */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* The actual */
.pdf-bg img {
object-fit: cover; /* use "contain" if you don't want cropping */
/* Ensure content stays above the background */
.pdf-content {
position: relative;
z-index: 1;
Then:
Assign pdf-bg to the Background Container (the one wrapping the image)
Assign pdf-content to your MainContent container (and Header/Footer if needed)
If you still see the image only in the “margin area”, it usually means the generator is still applying page margins, so try CustomMarginSize(0,0,0,0) and use padding on pdf-content to recreate your frame.
Hope this helps.