Cannot Set Background Element to Fixed Position - html

Question

I am having trouble setting my background image to where it is centered on the screen as you scroll down on a mobile device.
Currently, my website's background when scrolling on my desktop is as how I want it to be. The problem is on mobile devices and for some reason when using dev tools to view the site on mobile resolutions it works great but when it comes to real practice, it does not work.
Can anyone please help me figure this out?
My current code is:
body.custom-background, #custom-background-css {
background-position: center center !important;
min-height: 100%;
background-repeat:no-repeat;
background-attachment: fixed;
}
My website is: test.ebdesigns.us
(wordpress platform)
Also, when viewing source-code something is producing this and do not know. This might be affecting it.
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://www.test.ebdesigns.us/wp-content/uploads/2015/07/NewColumbis51Logorev101.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>

Answer 1

Actually some plugin is sending this "body.custom-background" your CSS, but this is not the case
Change your code to say > background-position : "top center", instead of "center center". That will do
**If you want to preserve the center center you have to provide a height to your main container(body)
body.custom-background, #custom-background-css {
background-position: center center !important;
min-height: 100%;
background-repeat:no-repeat;
background-attachment: fixed;
height:100vh;
}
Cheers. joy