I'm having a weird issue where background images within an iframe are being stretched to the height of the iframe rather than the size of the div that they're attached to.
Basically, I have a page made by a different agency that that will live within an iframe on the client's main site. This page has 4 or 5 sections with background images using the following css:
background-image: url(../images/bkg1.jpg);
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
This all works well when we view the document by itself, but when placed within an iframe, the background image size is no longer relative to the div with these styles, it's relative to the entire iframe. We were planning on having the iframe be the height of the document (around 7500px) within it so it looked a little more integrated, but what this does is stretch all of the background images to 7500px. I'm at a loss for why this is happening. Any direction to look in or if anyone has run across this problem before would be a huge help. Thanks!