Skip to content

Instantly share code, notes, and snippets.

@MurakamiShinyu

MurakamiShinyu/page-margin-negative.html

Last active August 4, 2023 07:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MurakamiShinyu/ea0181a176aaae6c77cf4de38df6d2b3 to your computer and use it in GitHub Desktop.
Save MurakamiShinyu/ea0181a176aaae6c77cf4de38df6d2b3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
page-margin-negative.html
<!DOCTYPE html>
<style>
@page {
margin: -8px;
bleed: 12px;
marks: crop cross;
background-color: cyan;
background-image: url(https://avatars.githubusercontent.com/u/8237330?s=200&v=4);
}
img {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
opacity: 0.8;
background-color: lime;
}
</style>
<body>
<img src="https://avatars.githubusercontent.com/u/8237330" alt="">
</body>
Raw
page-margin-positive.html
<!DOCTYPE html>
<style>
@page {
margin: 8px;
bleed: 12px;
marks: crop cross;
background-color: cyan;
background-image: url(https://avatars.githubusercontent.com/u/8237330?s=200&v=4);
}
img {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
opacity: 0.8;
background-color: lime;
}
</style>
<body>
<img src="https://avatars.githubusercontent.com/u/8237330" alt="">
</body>
Raw
page-margin-zero.html
<!DOCTYPE html>
<style>
@page {
margin: 0px;
bleed: 12px;
marks: crop cross;
background-color: cyan;
background-image: url(https://avatars.githubusercontent.com/u/8237330?s=200&v=4);
}
img {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
opacity: 0.8;
background-color: lime;
}
</style>
<body>
<img src="https://avatars.githubusercontent.com/u/8237330" alt="">
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment