When creating a PDF with Openhtmltopdf, make sure to position the image outside of the CSS @page margins or padding

I am currently working on generating a paged pdf document from html using Openhtmltopdf. My main challenge is placing an image right at the edge of the page, outside of the @page margin. Despite my efforts, including playing with visibility, padding/margin, and negative margins of child elements, any content outside of the @page margin remains hidden under the margin.

The issue can be replicated in the Openhtmltopdf sandbox. Just by inserting this code snippet:

<html>
<head>
<style>

@page{
            margin: 5cm;
            border: solid;
}
</style>
</head>
<body>

<div style="font-size: 90px; position: absolute; top: 0cm; left: -1cm;">
  Hello World!
</div>

</body>
</html>

into the sandbox found at , you will see the displayed result as shown below:

https://i.sstatic.net/51cDa.png

As you may have guessed, my problem lies in the fact that 'Hello world' is not visible outside the inner @page content section. Finding a way to override this rule and make the entire text visible would likely solve my issue. I have spent time meticulously formatting the existing content, so ideally, I would prefer to keep the current page margin definition without having to reformat the rest of the content. Ultimately, I simply need to place an image over the pdf document. Thank you in advance for any assistance!

Answer №1

If you're looking to include an image, consider setting it as the background-image of your webpage.

<html>
<head>
<style>

@page{
    margin: 5cm;
    border: solid;
    background-image: url(image:flyingsaucer.png);
    background-position: 3cm 3cm;
    background-repeat: no-repeat;
}
div{
    font-size: 90px; 
    position: absolute; 
    top: 0cm; 
    left: -1cm;
}
</style>
</head>
<body>
<div>
  Hello World!
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop CSS tooltip from overflowing outside of the page or window

One issue I am facing is with a CSS-only tooltip that uses a span to display the tooltip when hovering over a link. The problem arises when the link is positioned near the top or side of a page, causing the tooltip to extend beyond the edge of the page. I ...

Dynamic CSS sizing

Currently, I am in the process of creating a component and my goal is to achieve a specific layout without the use of JavaScript, preferably utilizing flexbox. Essentially, envision a messenger chat screen with a header and footer containing controls. htt ...

What is the best way to retrieve the textbox value when its associated checkboxes have been selected?

Upon selecting a checkbox and entering data into the linked textbox, upon submission I aim to reveal a form showcasing both the entered text and which checkboxes were selected. ...

Final day of the month (without a time stamp)

Looking to generate two dynamic dates in HTML, JavaScript, and jQuery with the format yyyy/mm/dd. One should display the last day of the previous month, and the other the last day of the current month. Does anyone have a solution using these technologies? ...

When the window is resized, Div escapes from view

My issue is that whenever I resize the browser, the div moves out of the window. I am using the jQuery scroll to plugin for navigating through divs. Oddly enough, when I resize the #home div, everything seems to work fine. However, when I resize other divs ...

The mix-blend-mode feature is not compatible with Chrome browser

I'm having an issue with the mix-blend-mode property in Chrome, as it's not functioning correctly. However, it works perfectly fine on Firefox and Safari. My goal is to achieve a cutout text effect. Thank you for any assistance! h1 { mix-blend ...

Issue with URL routing causing page to display incorrectly

When using the normal Href, the page is rendered properly, but the URL is not hidden: <asp:Repeater ID="rCompany" runat="server" DataSourceID="sdsCompany" > <ItemTemplate> <div class="col4" id="trip_third"> <a href="discover_detail.as ...

Adjusting the height of the carousel images to match the height of the window

I am trying to optimize my webpage by adjusting the carousel so that it fits perfectly within the window without generating a vertical scrollbar. Can anyone provide guidance on how to achieve this? Page: <div id="carouselIndicators" class=&qu ...

Achieving a child div to occupy the entire available space when the parent is specified as `mx-auto` can be accomplished using Vue and Tailwind CSS

Sorry if this seems like a basic question, I'm still getting the hang of Vue and tailwind. In my parent template, it looks like this: <template> <div class="mx-auto mt-4 max-w-3xl"> <slot></slot> </div> ...

Updating the value of an attribute within an HTML element

I need to update a specific attribute's value within certain <div> elements. This new value will come from our CMS and needs to be applied to multiple instances of the same attribute. For example: <div id="1395308878"> <div cl ...

What could be causing my page to appear off-center?

Hey there! I'm still learning the ropes, but I could really use a hand with this issue: So, while I was playing around with HTML and CSS, I wanted to create a page with a fixed size that would be perfectly centered on the screen. My approach was to p ...

JavaScript can be used to manipulate buttons and interact with them on a webpage

In my search for examples for my webpage, I stumbled upon a strange JQuery selector. Could someone please explain how this works and if I can use it to target unique indexed IDs in HTML? //The mysterious selector that puzzles me //What does "^" actually ...

Struggling to make a basic JavaScript prompt function as expected

<html> <title>UniqueTitle</title> <head> <link rel="stylesheet" type="text/css" href="style.css" > <script type="text/javascript"> function modifyDates() { var dates = pr ...

Is it advisable to hold off until the document.onload event occurs?

I'm working with a basic HTML file where I need to generate SVGs based on data retrieved through an AJAX call. Do I need to ensure the document is fully loaded by enclosing my code within a document.onload = function() { ... } block, or can I assume ...

A menu bar featuring dual color schemes for visual differentiation

I am currently designing a navigation bar where one category stands out with a different color (blue) compared to the rest (green). The functionality I'm aiming for is that when the cursor moves away from the blue HOME category, it should change back ...

Blank area located at the bottom of the document

I'm having trouble designing a webpage without a scroll bar because there isn't much content to display on the page. I've tried searching for solutions and following steps to fix the issue, but I haven't had any success. If anyone can a ...

Extend child flex boxes vertically when the main axis is horizontal

My flex boxes have the flex-direction set to row and align-items set to stretch. Despite setting align-self to stretch for the child boxes, they only fill the top part of the browser window. Can someone help me troubleshoot this issue? #containerDiv { ...

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

Transforming data from PHP JSON format into HTML output

Struggling to convert JSON data into HTML format? Having trouble maintaining the correct order of child elements in your structure? Here's a solution: Take a look at this example JSON: { "tag": "html", "children": [ { "ta ...

The HighChart graphs are not rendering properly within a limited div size

I have integrated a JavaScript library called Highcharts to visualize JSON data on a line graph representing stock prices. If you are unfamiliar with the terms used in this post, refer to the image linked below for clarity: https://www.highcharts.com/image ...