With HTML and CSS there are a number of ways to add an image to an element which yield different results. A couple that I can think of are:
Use an image in place of any text. Here we keep the text, but send it off screen, so it is still accessible.
h1 { background: url(images/image.jpg) no-repeat top center; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: XXpx; height: XXpx; }
Place an image to the left of the text (or could easily be to the right)
h1 { background: url(images/image.jpg) no-repeat top left; padding-left: XXpx; }
Use a background image, behind any text
h1 { background:url(images/image.jpg) no-repeat top center; }
More specific CSS selectors can be used to target only certain headers.
You can include custom CSS easily within reStructuredText documents using the raw
directive, like so:
.. raw:: html
<style>
<!-- One of the CSS styles above. -->
</style>
Alternatively, you can include custom CSS stylesheets from the command line using the --stylesheet
option of rst2html.py
.
In terms of achieving the same with PDF output, I will steal part of another one of my answers:
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional
.. raw:: pdf
role and to modify the above list styles.