Paralax image not centered

Hello,

It looks like there is some CSS defining the offset position of that picture which is why it is not centered, If you can tell us which theme you are using we can try and find where that is being set. Another option to try is when you are in the customizer selecting the image for it you may have the option to choose the background image size depending on your theme and you can set that to do not resize so if it’s cropping it automatically it will stop. I have included the CSS that is doing the offset below in case it is some of the CSS you have added.

background-position: -308.875px -162.4px;

Best Regards,

KyleM

Hi Angus,

Sorry for the delay in responding back. Thanks for your comment in reply to our inquiries. I have been reviewing this more in depth with one of the BoldGrid Developers. They will be addressing a bug in the Section Background Settings that we identified when setting the background as an image. Although the default Size is selected as Cover Area, the image is tiled. I believe this is the tiled effect you are seeing as you described: “it moves the image so it is not centered and the part that is cropped is repeated on the opposite side”. If you select “Tiled” then it actually sets the background image as “Cover Area”.

That should automatically size and position the image to a more appropriate view (without repeating the image either). If you are unsatisfied with how that looks you would need to further adjust the CSS manually. To do this is rather complex, but the steps below should assist you:

1. First, set your custom background image and save the settings for the background section to be parallax and tiled.

2. Next, go to the Page Editor and open up your homepage (or whatever page the background section is on).

3. Switch the Visual Editor to Text Editor, by clicking on the “Text” tab in the right corner of the editor. This will display the code in text form, rather than the visual preview.

4. Find the “boldgrid-section” div class, it should look similar to (but not exactly like) this:

   <div class="boldgrid-section background-beta" style="border-radius: 0px; width: auto; background-image: url('https://source.unsplash.com/9l_326FISzk/1920x1080'); background-size: cover; background-position: 50% 50%;" data-image-url="https://source.unsplash.com/9l_326FISzk/1920x1080">

5. Remove the following text from that code:

   background-beta
border-radius: 0px; width: auto;
background-size: cover; background-position: 50% 50%;

   The code should look similar to this after:

   <div class="boldgrid-section" style="background-image: url('https://source.unsplash.com/9l_326FISzk/1920x1080');" data-image-url="https://source.unsplash.com/9l_326FISzk/1920x1080">

   with the URLs being replaced by your image, rather than the image URL I was using for this example.

6. Now you will add a custom class, you can name this anything you want really, for my example I use ‘carlos-bg’. After you add your custom class name (inside the quotes for the class), the code should look similar to this:

   <div class="boldgrid-section carlos-bg" style="background-image: url('https://source.unsplash.com/9l_326FISzk/1920x1080');" data-image-url="https://source.unsplash.com/9l_326FISzk/1920x1080">

7. Save the page by clicking the Update button in the Editor.

8. Then, head over to the Customizer > Advanced > Custom JS & CSS.

9. In the Custom Theme CSS field, add your new class like this:

   .carlos-bg{background-position: -308.875px -162.4px;}

You should see the image instantly update in the preview window to the right and you can adjust the “px” values to move the image around to your desired positioning. I hope this helps!

Sincerely,

Carlos E