Log in / Register

Forum › How do I...?

Mixing generated and HTML content

mark_anderson_us
Hi All

I have a footer image that is almost a sideways z-shape (see attachment). I have set the background-image property to be the URL, and need to put the co address in the white space above and the page no in the white space below. This means I have to put a right padding on the page no without affecting the background image location

HEader and footer.jpg


Anyone got any suggestions how to do this?

Regards

Mark
  1. HEader and footer.jpg‎ 6.8 kB
mikkelricky
I'm not quite sure what you're trying to do, but it sounds interesting. Can you provide some more details? Maybe post a sample html page?

Some questions come to (my) mind:
  • Do you put the backgroud-image on @page or @page-right (or other page region)?
  • Is the co address part of the html content?
  • Does the background image take up the full width of the page?

Is this a usable solution?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>test</title>
		<style type="text/css">
@page {
  size: 200mm 200mm;
  margin: 20mm 20mm 20mm 20mm;

  @bottom-right {
    content: counter(page);
    vertical-align: bottom;
    padding-bottom: 2mm;

    background-image: url(footer_bg.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
		/* Pull background image into right margin */
    margin-right: -10mm;
    padding-right: 10mm;
	}
}

@page {
  @bottom-right {
    background-color: #ddd;
	}
}

body {
  background: #eee;
}
</style>
	</head>
	<body>
		<p>
			[<a href="http://princexml.com/bb/viewtopic.php?f=4&amp;t=22489">http://princexml.com/bb/viewtopic.php?f=4&amp;t=22489</a>]
		</p>
	</body>
</html>


Best regards,
Mikkel
mark_anderson_us
Hi MIke

thanks for the reply. I tried your suggestion, but couldn't get it work. I've attached result, as well as my html and footer image (with place holders for address and page no).

Was puzzled by one thing in your example: there were two @page -> bottom right's. Ho does that work?

Regards

Mark
  1. footer.zip‎ 35.0 kB
mikkelricky
mark_anderson_us wrote:
thanks for the reply. I tried your suggestion, but couldn't get it work. I've attached result, as well as my html and footer image (with place holders for address and page no).


I've given this another shot (see the attached file). This time the background image is added to the page and padding is used on the @bottom-left and @bottom-right page regions to fit the generated content to the background image. I hope you can make use of it.

mark_anderson_us wrote:
Was puzzled by one thing in your example: there were two @page -> bottom right's. Ho does that work?


The second one was just for highlighting the @bottom-right page region to see it's size and placement. Only one @page @bottom-right region exists, but I just styled it in the steps: first the actual styling and then the debug styling.
  1. footer.zip‎ 59.4 kB ‎
    Footer image example
mark_anderson_us
Thanks Mike

You're a star, worked a treat

(For anyone else interested) I did have to use margin left and right to move the text as much as I wanted left and right in the footer

Regards

mark