I would like to display a rotated watermark in the background of my pages, but CSS transform doesn’t work in @page @top-center (see example below). Do you have a workaround ? If possible, I would prefer not use a background-image stored in an external file.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS transform</title>
<style type="text/css">
body
{
text-align: center;
margin: 0;
padding: 0;
transform: rotate( 45deg ) scale( 2 ) ;
transform-origin: 0 0;
content: "CSS transform Works!";
}
@page
{
size: 10.79cm 17.46cm;
margin: 1.1cm 1.1cm 1.25cm;
/* Watermark */
@top-center
{
content: "CSS transform doesn’t Work!";
padding: 0;
color: rgba( 0, 0, 0, 0.1 );
font-size: 20pt;
margin: 16cm 0 0;
transform: rotate( 45deg ) scale( 2 ) ;
transform-origin: 0 0;
}
}
</style>
</head>
<body>
Hello!
</body>
