Adding an image into a page section background

Sometimes you want a page section to stand out on the page by giving it an image background. To add an image to a section background Hover over the section you wish to add the background image to until you see the section's blue toolbar Click the [icon-section-setup] icon on the section toolbar to open the Section panel on the left Click the [button-section-bg-image] button, if not already selected Click the [icon-add-image-to-section-background] button to open the Images & Media popup Select the image you wish to set as the section background, and it will drop right into the section video-set-section-bg-image.gif Adjusting the positioning of the background image If you have an image that's sized differently than the background -- for example -- if you have a square image and you want to use it in a vertically narrow section, then you can tell Heroic which part of the background image to show. 55-1.gif Click on the [icon-section-setup] icon for the section in question In the Background section, click on the [button-section-advanced] button Scroll down until you see Background Image Position and adjust as necessary so that the image is positioned correctly Important to know Using an image in the background of a section can help that section stand out, but it's critical that you don't overuse this feature on your site. Too many image backgrounds can look overpowering and distracting, especially if you use them incorrectly. Tips Be sure to use the Set Image Overlay feature (accessible via the [button-section-advanced] button in the Section panel) to either darken or lighten the image so that your text can stand out. In the image below, for example, the text is too dark. 55-image2.png
Was this article helpful?

Still puzzling over something?

The agent has read this article — and everything around it. Ask a follow-up and it answers in seconds.