Posted by oddhack on
URL: https://discuss.asciidoctor.org/Examples-of-CSS-changes-for-title-page-images-or-CSS-advice-tp8398.html

For years, people have been asking how to do title page images in HTML output, and for years, the answer has been to modify the CSS. OK. Is there an extant example where people do this? If there is, can it be wired into the documentation in some fashion? I am not at all sophisticated with CSS and so far, the only thoughts I've had are to

1. Use #header::before - which does not appear to allow any styling or control over size of the inserted content, just scales it to whatever the width of the header division content happens to be.

2. Alter the header division style itself to use a background-image. What I don't understand here is, given the image is SVG and of unknown pixel size, how can I then set the other CSS properties so the actual <h1> title element appears below (or above) the background image, no matter what screen size it's being displayed at, rather than in the middle of it.

3. If I wanted to define my own style insead of altering the stock #header CSS, I have no idea how to apply that to a header element. '[mystyle]\n= Title' is ignored. '[mystyle]= Title' or '= [mystyle]#Title#' works, but only applies the style to the <h1> or <span> element, not to the entire <div id="header">.

4. Is there any way to parameterize the title image in the asciidoctor source and have that propagate through to the CSS, that's integrated into the asciidoctor pipeline itself? IOTW to inject {title-logo-image} into the altered CSS style, so that the same style file can be used with multiple source documents (it's possible to rewrite the CSS before running asciidoctor, or rewrite the output HTML afterwards, but that's a nasty way of doing it).

Jon