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.