I would like to get the effect shown here:
http://jsfiddle.net/abalter/k8G3C/
The background image is transparent. The logo and text overlay.
The problem is, I want the background image to repeat-y. It's fine with a wide viewport, but when the viewport narrows, the text passes the bottom of the image.
If I do:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
then the background repeats in the y-direction, but all child elements become transparent as well. I have not found a way to make the image transparent without the child elements.
I'm formatting the background image such that it scales with the viewport, but is always centered -- the middle of the image is always in the middle. ("CSS-Only Technique #2")
Any suggestions?
appling opacity: 0.6; to body will make the whole page transparent. Change img to div like this :
HTML:
<div id="background-image"></div>
Css : now you need to set the size of the background-image to 100% on the x-achse and auto to the y-achse and ad a z-index:0;
#background-image {
background-image: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
width: 100%;
top: 0;
left: 0;
height:100%;
opacity: 0.6;
position: fixed;
background-repeat: repeat-y;
background-size: 100% auto;
padding: 0;
margin: 0;
z-index:0;
}