Hi
I have posted a beta version of my site… there is a problem with the background-image of some of the panels when the screen size is 1024px or more. The background image doesn’t seem to be on the actual panel? I’m not sure what is happening.
Could you perhaps have a look at it here and advise me: http://updawg.co.za/addons/test/
Many thanks
Shei
Hi Shei,
Very sorry for the late reply. We work through a prioritized forum queue, and unfortunately, it’s taken us some time to get to your thread. I’ve taken a quick look at the slider on your website and it seems as though you’ve figured out the issue. As such, do you still need help with this? If so, could you please elaborate on the issue?
Hi Alex
Thanks for the response. I completely understand that you guys have a queue.
I actually haven’t managed to sort out the issue with my slider.
If you check out the demo version of the site I have online at http://updawg.co.za/addons/test/
The problem is that the background images of panel-grids with the following id’s (calltoaction, calltoaction2 and pg-5-6) are all misaligned… and I know that it is being caused by the slider because when I set just one background image to the slider instead of the 4 that are currently there… these background images are no longer misaligned.
The problem i am having is I can’t figure what about the slider is causing this?
Hi Shei,
Ah, sorry – not too sure how I missed that.
So this appears to be because the image is set to parallax while the theme has set the images to be fixed (for reference, view this page to get an idea of the differences between the two). You have two options for proceeding.
Disable Parallax background
Please open the row that the image background is set on and navigate head over to the row styles sidebar. Open the Design settings group and set the Background Image Display setting to Cover.
Disable Sydney fixed backgrounds
You can prevent this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.panel-row-style[data-hasbg="hasbg"] { background-size: initial; background-attachment: initial; background-repeat: initial; }You might also need to install the SiteOrigin CSS Editor.
Please note that you’ll likely need to increase the overall height of the background images the image being set to parallax when the image is barely bigger than the row, has a high chance of having a very poor parallax effect.
Hi Alex
I tried to disable the parallax background on the slider images but I haven’t been able to make it work.
I have created a username and password for you to login to the site and see if you can fix it. How can I send it to you?
I have a css file set up specifically for the slider widget so if you could just give me css code that could disable the parallax effect on the slider images that would be great.
Hi Shei,
Actually, I stand corrected – it’s not the background image display setting that’s set to parallax but something else is forcing it to be so. At this point, you should really get in contact with aThemes to see if they have any idea what may be causing the parallax effect.
Regardless, you can forcefully prevent the parallax effect (which I do not recommend) with some CSS. Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
.panel-row-style[data-hasbg="hasbg"] { background-position: center !important;}You may want to adjust the actual background-position.
You might also need to install the SiteOrigin CSS Editor.
Cool! Thanks for all the help!
Really appreciate it! I'll try and get in contact with athemes.