Responsive design with 2 background images. Need to position one on the other but one will repeat x and the one in front won't?

I have read many articles on this and still not understanding it. I have a header that I want to use 2 background images on. The first image will be a 1px repeating x and the other will be centered on top of that. I do need it to be responsive.

I have tried everything from cover to center and also even included !important.

Different bg image with new page load using styles css


I would like to have a different background image appear each time a new or different page s loaded (clicked on) and if possible using the styles css file.

BACKGROUND: url("") no-repeat center,
                   url("") no-repeat center,
                   url("") no-repeat center;
       BACKGROUND-SIZE: 80% 100%;

Syndicate content