Enhanced Background Image Selection in HeyBoss
HeyBoss now lets you easily select and update background images set via the CSS background-image property. This new feature expands your editing capabilities beyond traditional <img> tags, giving you more creative control over your website's visuals.
Prerequisites
Access to the HeyBoss editor
Basic familiarity with editing your website in HeyBoss
How to Select and Update CSS Background Images
Open your website in the HeyBoss editor.
Navigate to the page or section where you want to change the background image.Select the element with a CSS background image.
Click on any area that uses a CSSbackground-image(such as banners, hero sections, or cards). The editor now recognizes both<img>tags and CSS background images.Click to edit the background image.
When you select the element, a toolbar or menu will appear. Choose the option to change the background image.Choose your new image.
Upload a new image or select one from your media library. The editor uses thegetBackgroundImageUrl()function to extract and preview the current image.Save your changes.
Click Save or Apply to update the background image. TheenableBackgroundMedia()feature ensures your new background is interactive and dynamic.
Tips for Using Background Images Effectively
Use high-resolution images for large backgrounds to ensure clarity.
Keep file sizes optimized for faster loading times.
Test your background images on different devices for accessibility and readability.
Leverage the clickable background feature to add interactive links or calls-to-action.
Example Use Case
Suppose you want to update the hero section of your homepage with a new background. With the enhanced feature, simply click the banner area, select Change Background, and upload your new image. The editor updates the CSS background-image property instantly, making your site more visually appealing.
Related Articles
Need Help?
If you have questions or need assistance with background images, contact HeyBoss Support. We're here to help!