Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #23447

    Hi,

    When i add an image to a section as a background and set it with no scroll it automatically is centered side-to-side and looks perfect. However, when i set it as paralax it moves the image so it is not centered and the part that is cropped is repeated on the opposite side. You can see this affect when you scroll down to the image on this page here. Can you help solve this issue? I have tried all kinds of code options working in the text window on this page and have been able to change it somewhat by adjusting the size, but i can’t seem to keep it at 100% and have the image look proper.

    #23454
    Kyle
    Member

    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

    #23453

    Hi Kyle,

     

    I’m running the Monument theme. I’m not great with CSS but I can tell you that the background position is not defined like that within the text of that page. I have looked in the Style.css file and can’t find that line of code either. Can you tell me where I can look to find it or just how to fix it?

    Thanks

    #23452

    Sorry Kyle,

    I should have mentioned… It’s not just this page on my site. For any page when I use an image as a section background and set it to paralax it does this.

    #23451

    Yes, the code is not in the Customizer > Advanced > CSS Editor. I believe it is something in the theme coding. I tried adding a new page in Staging and then without doing anything else I created a section and added an image to the background. With scroll effects set to “none” there is no problem. But as soon as i select paralax the image crops as mentioned before.

    I am using WordPress 4.8.3 running Monument theme.

    #23450
    BoldGrid Support
    Keymaster

    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;}

    10. 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

    #23449

    Hi Carlos, thanks for the help.

    When I enter the code in the custom CSS editor it works perfectly. I can adjust the image by changing the values and it instantly shows the effect in the preview screen. However, as soon as I set the image to Paralax the code has no effect on the image. It is always cropped exactly the same amount. I have tried changing the location of the background-paralax text in the text window but unless it is inside of the quotation marks with boldgrid-section then the paralax effect will not work. This makes me think that something with the paralax command is overriding the image setting and may be a problem with the source code for the paralax command. This is beyond me as I don’t know code and don’t have access to the boldgrid source code.

    This is obviously very disappointing as I would like to have multiple pages with background images that are set to paralax. I also don’t want to give up this theme if it is a theme specific issue as I worked very hard to create this site using this theme. Please help and let me know if there is any other way to fix this.

    #23448

    Hi Carlos,

    Further to this… the effect I described does not happen when I view in the tablet or phone layout, so if I modify the image to work with the computer screen view then it will look odd in the other views.

    I would very much like to find a solution to this. I feel that there is an obvious glitch with either the theme code or paralax setting code. Please help to resolve this so I can use this great effect that is not working.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Paralax image not centered’ is closed to new replies.