I am currently crying to design a flyer (A4 landscape with 3 slots). Each slot has a high-resolution background image in the same ratio as each slot. The background images are not properly scaled down by Prince. I played around with background-image-resolution and background-repeat however I could not make the images shown completely (however scaled down to a third of their width for each slot). Am I missing something?
I am using the following HTML:
<html>
<head>
<style type="text/css">
@page {
size: a4 landscape;
margin: 0cm;
}
.slot {
width: 10cm;
height: 21cm;
border: 1px dashed #dddddd;
}
#page1 {
position: absolute;
margin-left: 0cm;
background-image: url("background02.png");
background-repeat: repeat-x;
}
#page2 {
position: absolute;
margin-left: 10cm;
background-image: url("background.jpg");
}
#page3 {
position: absolute;
margin-left: 20cm;
background-image: url("background02.png");
}
</style>
</head>
<body>
<div class="slot" id="page1">
Page 1
</div>
<div class="slot" id="page2">
Page 2
</div>
<div class="slot" id="page3">
Page 3
</div>
</body>
</html>
I am using the following HTML:
<html>
<head>
<style type="text/css">
@page {
size: a4 landscape;
margin: 0cm;
}
.slot {
width: 10cm;
height: 21cm;
border: 1px dashed #dddddd;
}
#page1 {
position: absolute;
margin-left: 0cm;
background-image: url("background02.png");
background-repeat: repeat-x;
}
#page2 {
position: absolute;
margin-left: 10cm;
background-image: url("background.jpg");
}
#page3 {
position: absolute;
margin-left: 20cm;
background-image: url("background02.png");
}
</style>
</head>
<body>
<div class="slot" id="page1">
Page 1
</div>
<div class="slot" id="page2">
Page 2
</div>
<div class="slot" id="page3">
Page 3
</div>
</body>
</html>