How to add images to Headings?

[ryan]

how do I add images to heading styles? i would like a small arrow to appear to the left of one of my heading styles. How do i add this image to the style so it appears automatically with the assignment of the style without manually adding it each time?

So far i have the following CSS properties set to:

mc-image ................. image.pdf
mc-image-position ....... left
mc-image-spacing ....... 1px

But the image still does not appear next to the heading.

[Andrew]

In the heading class (or heading element, if you are not using a separate class), use the background-image property to add your image, and then adjust your text using the margin properties (margin-left, margin-right, etc.) to make sure your text does not cover the image.

[LTinker68]

FYI... I think the mc-image fields are for Flare features like the togglers and drop-downs and that's why it didn't seem to work with the heading styles (no Flare effect in the heading that would call the mc-image attributes).

[ryan]

.. and then adjust your text using the margin properties (margin-left, margin-right, etc.) to make sure your text does not cover the image.

How do I adjust the text to indent but keep the image with a zero indent?

[LTinker68]

The background image, by default, will be flush to the left and top margins of the "box" around the heading. The text is controlled by the margin and padding, but in this case you'll probably just need to adjust your padding-left and possibly the padding-top, depending on what your image looks like.

[Andrew]

Whoops, that should have been padding, not margin. Sorry about that!

[ryan]

Got it -- thanks!