Background Image Not Responsive

Support
#1

Hey all,

I’m having an issue with the new section background images not being responsive. On some pages I was using the classic section, and they work fine. On newer pages where I’ve started using the new sections, they don’t change and I can’t figure out why.

www.theseforeignroads.com
Home, About and Contact are all Classic sections that are responsive
Food, What to Eat, and Recipes are New sections that are not.

Thanks again

#2

Hi @kerridawn

I’ve checked your website and I can see the background image in these sections is responsive:

Could you please let me know if I’m missing something? which mobile device are you using?

Thanks.

#3

Using an iPod touch at the moment. Still not working.

#4

Hi @kerridawn,

Please make sure that you turn off the Parallax effect in the background as it might cause the issue. Also please make sure that in the options you set the background to be normal and not fixed.

Also, please update the theme to version 6.1.6 as you are using the latest version of the Cornerstone which is not compatible with the current version of your theme.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

#5

Alright, so it was because of the fixed background CSS I added. Unfortunately, that CSS was in place for a reason. The parallax effect doesn’t work the same with the new sections. I don’t understand fully, but it only works by making the background image larger than it should be. I was told the only way to fix this was with that code.

In the classic sections, I simply activate parallax and it works fine. How can I achieve the same parallax effect as the classic section while using the new style?

I’ve made an example page showing both examples. The new section is the top one, in order for there to be any parallax at all, the image must be much larger (and distorted as a result). The lower one is classic, it works perfectly fine. The fixed background happens automatically and parallaxes without resizing.

http://theseforeignroads.com/_test-items/

This is the code I was using:

.x-bg-layer-lower-image {
background-attachment: fixed;
}

1 Like
#6

I’m facing the same issue, the parralex option in the new sections makes the image larger and doesn’t look good, and no option to add fixed parralex without code.

#7

Hello There,

In the classic sections, I simply activate parallax and it works fine. How can I achieve the same parallax effect as the classic section while using the new style?

  • You can’t simply because there are not of the same structure. The v2 section relies on the css transform while the classic section is utilizing the background position. The best way to resolve this is to choose either you use the classic section or the v2 section instead.

@spi:

Just keep in mind that the lower the number, the lesser parallax effect is noticeable in the section.

Hope this helps.

#8

Unfortunately, the v2 doesn’t give the parallax effect I want if I don’t resize the image. I guess I’ll stick to classic sections for this application.

#9

Hi kerridawn,

Ok, to be able to add Classic Section just hold the Cntrl (Windows) Cmnd (Mac) key and click on the Add Section link in the Layout tab of the Cornerstone and you will be able to add the classic section.

Thank you.

1 Like
#10

So I have used X Theme, and Parallax background images on rows in Cornerstone now for probably about 30-40 websites. Now for some reason it is making the background images disappear if Parallax is activated. This means I will need to go backwards and manually adjust every single website I have previously created to fix this. This is not good. I have purchased over a hundred licenses of the X theme, and for it to not be backwards compatible is a major issue for me. I might have to reconsider using X theme now in the future unless this issue can be addressed.

1 Like
#11

Hi There,

Sorry that you’re having that issue, but we kindly ask to please create your own thread as this one is getting longer, and being hard to follow.

In the meantime, please confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here, then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thanks,

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.