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.

Syndicate content