Is it possible to anchor an image to a page?

[matthesrieke]

Hi all,

first of all thanks for a great software. I was looking for something which allows more complex and custom styling with AsciiDoc for a longer time.

I have a question regarding individual page layouting. My document and @page CSS is defined as below. Is there a possibility to include an image that anchors on a single page (i.e. not a running header, more like a section teaser), in particular with no margin? See example below.

@page {
  size: A4;
}

@page :left {
  margin-left: 3.1cm;
  margin-right: 5.5cm;
  margin-top: 2.2cm;
  margin-bottom: 2.2cm;
}

@page :right {
  margin-left: 5.5cm;
  margin-right: 3.1cm;
  margin-top: 2.2cm;
  margin-bottom: 2.2cm;
}

body {
  margin: 0;
  padding: 0;
}

[ggrossetie]

Hello @matthesrieke

first of all thanks for a great software. I was looking for something which allows more complex and custom styling with AsciiDoc for a longer time.

Thanks 😊

I have a question regarding individual page layouting. My document and @page CSS is defined as below. Is there a possibility to include an image that anchors on a single page (i.e. not a running header, more like a section teaser), in particular with no margin? See example below.

One way to do it, is to add a header on a particular page using named page: https://www.w3.org/TR/css-page-3/#using-named-pages

Page 1

[#page-2]
Page 2 Content

#page-2 {
  page: teaser
}

@page {
  margin: 2cm 2cm;
}

@page teaser {
  margin: 8cm 2cm 2cm;
  @top {
    position: absolute;
    background-image: url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1");
    content: "";
    background-size: cover;
    background-position: center;
    height: 7cm;
    width: 100%;
    margin-bottom: 1cm;
  }
}

And here's the result: result.pdf

[matthesrieke]

Great, thanks a lot! Works like charm. I needed to tweak the template JS a bit to have the section IDs included in the the divs in order to apply the style via the @page selector only to "special sections" that act as the teasers.