Using CSS and the Background Image Property to replace text with images
In this example, we will replace the the Heading 1 Text with an background image using CSS.
- Using the tag selector find the DIV name of where you would like the image to appear.
- With the <div#header> tag selected press the new css rule button on the CSS panel. Create an advanced ID named #header
- Set the Margins and the Padding to Zero and the Height to the height of your header image. In the background category set the background image to point to the header image you just created an set the repeat to no repeat.
- Hit Apply and then Okay
- Your should now see your header image inside the header div. You will also see the Heading 1 text on top of the image.
- At this point some people would just delete the Heading text and move on, but for accessibility and SEO purposes we are going to just hide the heading text, so it is available for both screen readers and if we would like to present the page in a different format at a later time (Style Sheets)
- Using the Tag Selector select the H1 tag inside of the header div.
- In the Style Panel select the existing rule div#header h1 and press the edit style sheet button (looks like a pencil)
- Clear out any existing properties for this rule and set the Margins and the Padding to Zero.
- In the Block category set the text indent property to -9999px. This will hide the text off the screen but it will still be visible to screen readers.
- Press apply and then OK.
- Save the document and repeat as need for other elements on the page.
Note: There may be some instances where you would like text to appear on top of a background image. Just skip steps 6-11 and style the text within appropriately.
Embedding Images into an HTML Document
- Place your cursor at the point where you would like the image to be displayed.
- From the Insert Menu select Image. Add ALT text to the image when prompted.
- Style the image as necessary by creating a class or in the properties inspector.
Note: If the image appears to have a margin or a border make sure the border property is set to zero and that the image is not marked up as a paragraph or heading.