Search for answers:
The OptimizePress Support Site Has Moved: Click here to access the new Support site

Scaling of full width row background image on mobile

When you are using a background image for your rows inside the OptimizePress LiveEditor, you may wish to adjust the positioning of your image when the page is resized on mobile devices

Unfortunately HTML &  CSS (the code that controls the formatting of images and text on your pages) only gives us a little flexibility with how images behave when the page is resized.

We do not set the image to scale down so it is still fully visible as this would mean that your row would have empty space below the resized image which would bad

Setting the Background Image Position

What you CAN do is set the background image alignment when the page is resized. Follow the steps below:

1. First ensure that your background row image is set to the "Cover/Stretch" option 

2. Inside the row options, set a custom CSS class  for the row, for example "bgposition"

3. Now save your Row options settings

4. Go to Page Settings > Other Scripts > Custom CSS inside the LiveEditor

5. You can now add some custom css to set the position of your row background (choose from one of the options below)

To set your image to be centered: 

.bgposition{background-position: center !important;}

 

To set your image to be aligned left:

.bgposition{background-position: left !important;}

 

To set your image to be aligned right:

.bgposition{background-position: right !important;}


Once you have added that code, save the page and preview the page - when you resize you should see a difference depending on the option you chose

This gives a little flexibility in how your image looks and which parts of the image are still visible when the page is resized.  Unfortunately there isn't any further tips we can provide on customising the image position or scaling on mobile due to CSS limitations.

 

Didn't find an answer to your question? Contact Our Support Team (Submit a ticket)
Was this article helpful?
1 out of 1 found this helpful
Follow

Comments

Other Help Categories:

Get Started Guide

Watch our Ultimate Getting Started guide video

Pre-Sales Questions

Ask questions before purchasing our products

Login Problems

If you're having issues logging into our members hub

Accounts & Billing

Update your billing, request a refund and other accounts help

API Key Issues

Get help with licensing your site and API key issues

Membership Help

Get help creating Membership portals and courses

LiveEditor Help

If you need help using or troubleshooting the LiveEditor

Integrations

Find out about the many integrations possible with OptimizePress

Affiliate Questions

Have questions about promoting OptimizePress

Clubhouse Questions

Questions about our Clubhouse Membership Subscription