When I try to load a background image under appearance – > customise -> page -> page background image, nothing shows. No matter which image from my media gallery I select. Though when I try to change the color under ”page background”, everything neatly adjusts just fine.
Page Background Image not working
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Remy
Apologies for the delay.
You’re using the following Custom CSS for this page:
.page-id-31 #main { background-image: url("http://theportalvault.com/wp-content/uploads/2015/10/Website-Achtergrondv3.jpg"); background-repeat: no-repeat; background-position: center; }That will override any settings in the Customizer for the page in question. If the CSS is unrelated then we might try a plugin conflict test. I can’t see a page background printing out in your Customizer generated CSS so there might be a functional issue stopping that setting from saving. De-activating all non-SiteOrigin plugins at once and re-testing the setting would let you know if that was an issue.
Hi Andrew,
It’s okay, I eventually found the answer elsewhere. Sorry I forgot to mention the problem was resolved. But thank you anyway!
The CSS you mentioned was added to fix precisely this problem and it did it’s work :).
So when the problem occured in the customiser, the CSS you mentioned was not present. (So something strange still going on there… )
I do have a different problem. I would love to reduce the vertical empty space between the text on this page: http://theportalvault.com/?page_id=36 – so that it would fit on a full hd monitor without a scrollbar. So a friend told me to reduce the margin. However:
.page-id-36 .panel-grid-cell { margin-bottom: 0px !important; }Isn’t working for me. Any suggestions?
No problem. Let me know if you want me to look at the main problem sometime in the future.
For the new question, let’s try:
.page-id-36.layout-full .panel-row-style { padding-top: 5px; padding-bottom: 5px; }Let me know how that goes :)
Perfect! Awesome :-) I’m good for now but…
I’ll be back…
Well that certainly didn’t take too long. And this is probably my biggest issue yet as I’ve already spoken to two of my far more experienced webdeveloper contacts and they didn’t have the answer.
On my main page: http://theportalvault.com/ I am using the Master Slider plugin (instead of the vantage slider). The vantage slider was replaced a long time ago by changing some code. I got the help from this forum but I can’t remember exactly what was changed.
Now on the main slider there should be a button that says ”see our 2015 demo reel’. However, as it turns out it doesn’t show on all computers. It appears to be especially problematic with chrome on iOS. But also in Microsoft Edge on my transformer book it remains absent. However the majority of the people I talk to can see it. So I didn’t even notice this problem existed until now.
I thought it could possibly be related to the code I changed back then? The plugin is fully compatible with all those browsers and current WP. Since this problem ONLY shows when I place a button on the main slider, I figure something theme-related is more likely to be wrong.
I would kill for some custom CSS to force the button’s visibility.
My friend came up with this code:
.ms-btn-container { left: 50%; transform: translateX(-50%); bottom: 0; } .ms-btn-container > a.ms-layer { display: block !important; visibility: visible !important; left: 0 !important; }Which did force the buttons visibility on all browsers, but ruined it’s position throwing it to the top-left corner on the computers that didn’t show it before and horizontally far to the left on computers where it did. I tried messing around with the code, nothing worked and bottom line is: I don’t get what about it does and does not work. So obviously I deleted it from my CSS. My friend was out of options too.
I’m lost.
Will you be the one with THE answer Andrew? :) I very much hope so.
Should I make a separate topic for this?
Apologies for the delay. I’ll answer as soon as possible this evening. Thanks for the wait.
It’s okay. Thank you Andrew. Really :-).
Thanks for the wait. When is the button supposed to appear? I can’t see it in OS X Chrome.
The button is being issued an inline style of display: none; that’s why I can’t see it:
See the display: none; declaration.
I haven’t worked with Master Slider but my guess is this has to do with the way the animation and layers have been setup in the slider.
You can perhaps try a plugin conflict test to see if something is getting in the way of the slider animation working.
De-activate all plugins, even SiteOrigin plugins, just test the slider on its own with Vantage. If the issue is resolved then slowly re-activate plugins, testing each time.
Hi Andrew,
Thanks for getting back to me.
I tried what you suggested. Same result. With all other plugins offline the button still doesnt show.
Is there way to force the display somehow? Like my friend tried with the CSS code that worked (apart from ruining the position that is.)
Or any other suggestions?
Thanks
We can but ideally you’d re-work the slider itself to stop the issue. I assume it’s something to do with the setup in Master Slider. Have you considered re-creating the slide perhaps?
Hi Andrew!
Yes I have and I’ve also tried this. No luck. As I mentioned before: buttons in other slides all but the main slider work fine.
Little update: changing the layer settings from normal to static seems to work for visibility! It pops up in the top-left corner. You should be able to see it now too.
Then using this:
.ms-btn-container > a.ms-layer { bottom: 50%; !important; }Placed it at pretty much the vertical height I was going for. I tried position; center, but it doesn’t respond to it.
Any idea how to center it?
Sure, let’s try:
.ms-btn-container[style] { left: 50% !important; margin-left: -137px !important; }or, to stop conflicts with other Master Sliders we could keep it specific and say:
.ms-parent-id-1 .ms-btn-container[style] { left: 50% !important; margin-left: -137px !important; }YES! It worked! I tested it on several computers that had the problem and the button shows and works on all of them now :-).
Thank you so much Andrew!
Awesome :)
All the best.
I’m so happy this is finally over :-)
Something thats a little weird though: the button now jumps either up or down about 20px (depending on computer / browser) and it’s link response time seems a lot longer then before.
It still works. But sometimes you have to click it 2 or 3 times until it responds, unlike the buttons in the main menu.
Does this problem seem familiar to you?
We’re essentially hacking Master Slider. Ideally the slider plugin should be handling its own layer positioning. The button looks fine for me in Chrome. In Firefox I can’t see it. In Safari I can see it but the vertical positioning isn’t correct. This is all on OS X.
At this point I’d consider a big shift. Perhaps another slider that offers layers? LayerSlider? I know it’s not free. Perhaps hunt for a free option with layering. OR see if you can get hold of Master Slider support. It would be much better to get your slider with layering functionality working properly. Especially if you want to perhaps make a few new slides in the coming months.
I suppose you’re right.
For now I’ve deleted the button and inserted it in the actual video file. The entire slider now links to the assigned page. It won’t give a hover effect and look as neat, but at least for the time being I’m sure it’s visible and in the right position.
I’ll be on the lookout for a new slider.
Thanks for everything.
For sure :) All the best.