Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot position background images in v61 #2099

Closed
LukasKlement opened this issue Mar 15, 2024 · 3 comments
Closed

Cannot position background images in v61 #2099

LukasKlement opened this issue Mar 15, 2024 · 3 comments

Comments

@LukasKlement
Copy link

Since v61, background images do not work anymore on the @page rule. Specifically, they appear to be mis-positioned.

This used to work in v60:

<!DOCTYPE html>
<html>
  <head>
    <style>
      @page {
        size: A4 landscape;
        background-image: url('JPG image with same dimensions of the page');
        background-position: 0 0;
        background-size: cover;
        background-repeat: no-repeat;
        margin: -{{menu.style.paper_bleed}}mm;
      }
    </style>
  </head>
  <body>
  </body>
</html>

In v61 it's not possible to get the background to align on the top left and cover the whole page.
@liZe
Copy link
Member

liZe commented Mar 15, 2024

Hi!

We’ve tried to render your example with an image of 100×100px, a page size of 100×100px and a margin of -10px, and it gives the same result with v60.2 and main.

Maybe you use a rule like background-attachment: fixed? The change probably related to the changes applied to fix #1993.

@LukasKlement
Copy link
Author

LukasKlement commented Mar 31, 2024 •
edited
Loading

Hi @liZe, thanks for the reply.
It appears the issue wasn't mis-positioning, but it was another CSS setting:
body { background-color: var(--color-page); }

This appears to overwrite any background set on the @page rule.
The behaviour changed and was not documented in the changelogs. Is this a bug?

@liZe
Copy link
Member

liZe commented Apr 1, 2024

If your code is more something like

body { background: var(--color-page) }

then this issue comes from #1219 that has been solved in v61. In previous versions, this was not supported, and the color wasn’t painted on the body. Now that it’s supported, the color is painted and hides the background set on the page.

If that’s the case, it’s not a bug, it was a bug that’s now fixed! You can use something like

@media print {
  body {
    background: none;
  }
}

to avoid the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @LukasKlement