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.
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("http://www.mysite.com/images/backgrounds/lizard2.jpg") no-repeat center, url("http://www.mysite.com/images/backgrounds/bg2.jpg") no-repeat center, url("http://www.mysite.com/images/backgrounds/bg1.jpg") no-repeat center; BACKGROUND-SIZE: 80% 100%;