cssbackground-imagetransparencyopacitybackground-repeat

How to get a transparent background image to repeat

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?

Solution

  • 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;
}

    Demo:http://jsfiddle.net/k8G3C/4/