I've searched high and low but can't seem to find a solution that works for my issue!
On my website, there is a green background with a form in the center of it. You can take a look at the jsFiddle example here. My goal is to have the image located here placed underneath the green layer without stretching it - just filling the green layer with about 50% opacity.
The current code generating the green layer is as follows:
#mainarea {
height:900px;
background: #2ecc71 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Roboto";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#mainarea::before {
z-index: -1;
content: '';
position: fixed;
top: 0;
left: 0;
background: white;
/* IE Fallback */
background: white;
width: 100%;
height: 100%;
}
Your assistance is greatly appreciated!