I am trying to achieve a similar effect as shown in this example:
http://jsfiddle.net/abalter/k8G3C/
The background image I'm using is transparent with the logo and text overlaying it.
My issue arises when I set the background image to repeat-y. It works fine on wider viewports, but as the viewport narrows, the text goes beyond the bottom of the image.
If I try the following CSS:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
the background repeats vertically, but all child elements also become transparent. I haven't been able to figure out a way to make only the background image transparent without affecting the child elements.
I am aligning the background image so that it scales with the viewport while remaining centered -- the middle of the image always stays in the middle. ("CSS-Only Technique #2")
Do you have any suggestions or solutions for my problem?