[Feature] Change background image implementation

[joe9663]

Is your feature request related to a problem? Please describe.
Background images configurated with Customize > Background have problems displaying correctly on iOS mobile and tablet devices when both the Cover background size and Fixed position are set for the image. Combining those 2 settings causes the image to appear pixelated and much larger than expected.

Describe the solution you'd like
We might be able to use a pseudo element to handle background Instead of assigning our rules directly to the element. Using a pseudo element allows us to use position: fixed instead of background-attachment: fixed to create the same effect and work around the limitations of iOS mobile browsers. The following example code was implemented on a user's website to allowed a fixed background image to work on an iPhone.

.palette-primary.custom-background:before {
        content: "";
        top: 0;
        left: 0;
        position: fixed;
        background-size: cover;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url("image/url.png");
        background-position: center top;
}