Forum How do I...?

Rotate Watermark

nico
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>
mikeday
Good news: Prince 9 supports CSS Transforms in @page margin boxes. :D