How to change a background image that has been set with CSS.
You may come across an issue where you are unable to select a background image area using the built-in highlight feature.
The likely reason is because your content (headlines, paragraphs, CTA's etc) sit over the top of the background image and blocking it from being selected.
Think of your website like two sheets of paper on top of each other. The bottom sheet is a solid sheet of paper showing your background, over the top of it is a see-through sheet of paper showing your content.
In these cases you would need to manually select the element using the ‘Affected Elements’ options of the personalization editing tool.
In this article we will show you how to set up a personalization in the campaign editing area and manually set the background image element so we can change it.
The steps required include:
- Upload the new background image(s) to your website.
- Locate the selector for the background image using the browser ‘Development Tools’.
- Set up a personalization, and set the background image selector manually.
- Apply a design change in the 'Additional Styles' area to add the new image.
1. Upload the new background image(s) to your website.
As the first step, we recommend to upload the new image(s) to your website, and note the image URL(s) for the personalization.
The reason for this is that in order to change the background image, we will need to add the URL of the new image into the 'Additional Styles' area.
For WordPress websites, you can locate the image URL via 'Media' -->'Library'. Click on an image and copy the URL that is in the 'URL' field.
2. Locate the selector for the background image element.
To locate the ‘selector’ for the background image, browsers come with ‘Development’ or a ‘Page Inspector’ tools that allow you to examine the structure of your website.
Open your website in a new window or tab. To open the development or page inspector tool, right click on the area you want to personalize. Click ‘Inspect’ in the options available.
A window pane will open at the bottom of the browser. This pane will display the structure of the page on the left and the design applied to the page on the right.
In the left panel, hover over the different elements and note the design being applied to the element.
Look for an element that has 'background-image' applied to it in the right panel.
Once you have located the style that controls the appearance of the element, click on the style and copy the ‘selector’ to your clipboard.
3. Set up a personalization, and set the background image selector manually.
In the campaign editor, we will need to display the personalization editing tool in order to add the selector located and copied from the step above.
To display the personalization editing tool, highlight and click on any element on the page.
Select to personalize the element.
In the personalization editing tool, click on the ‘Affected Elements’ tab.
In the available options, click on the ‘view / customize selector (advanced)’ button.
A field will display with the selector of the element RightMessage has pre-populated for that element.
Place your cursor in the field and delete the pre-populated selector. Paste the selector you copied from the browser developer or page inspector tool into the field.
The personalization tool will confirm if an element matches the selector you have added, and the website preview pane will highlight the area of that selector.
Click ‘Done’ under the selector field to confirm the new selector being personalized.
Apply a design change in the 'Additional CSS' area to add the new image.
The final step is to override the default design code by applying a change in the 'Additional Styles' area.
In the personalization editing tool, click on the ‘Modify Element’ tab, and click on the toggle arrow beside 'Additional Styles'
In between the brackets in the right field, add the image URL.
You will see the new background image populate in the element.
To save the personalization, click the 'Publish' button in the top right corner.