Transparency headache

Question

I just made an image to give you a visual example for understanding my question.

html example (jsfiddle)

As you can see, I have an active arrow whose purpose is to circulate along the content columns. However, I want the transparency from the header's background, and not from the content when deleting my white background.

Is there any trick to burn through my content background to reach the background to my header?

I made an extra image for a better view:

Note: I use patterns as background, not solid colors.

Answer 1

My initial thought is a background on the content area with a transparent triangle bitten out of it. Then apply a negative margin to the content Then set the content's position to relative and set it's top property to a negative amount and set the bottom padding of the header to the same amount.

Something similar to this? http://jsfiddle.net/sT53s/

Answer 2

You can play with css3 rotate property check this http://jsfiddle.net/TgWMH/18/

HTML

<div class="arrow three"></div>

CSS

.arrow.three:after {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") repeat scroll 0 0 transparent;
    content: "";
    height: 200px;
    left: -14px;
    position: absolute;
    top: 0;
    width: 200px;
}
.arrow.three {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    background: none repeat scroll 0 0 transparent;
    height: 100px;
    margin-top: -51px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

Answer 3

CSS3 Multi-background Version

As long as your content region is always going to have a solid background colour you could use the following modification:

.header {
  height: 200px;
  background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

By adding fixed you make sure that where ever else that background image is used, it should align correctly. Then there is this modification:

.arrow2 {
  margin-top: -2px;
  width: 111px;
  height: 56px;
  background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0,
    url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

Then all you need to do is reverse your arrow2.png so that the arrow area itself is transparent and the outside part of the arrow contains your content's background color.

Obviously this will only work for browsers that support multiple backgrounds.

CSS2 Single-background Version

Thinking about it, as my brain is being rather slow today... there is no reason to have to use multiple-backgrounds. You could just have your arrow markup like so:

<div class="arrow2">
  <div class="arrow-inner"></div>
</div>

And then apply the 4170671240_a90769d747.jpg fixed background to .arrow2, but apply your actual arrow2.png background to .arrow-inner. This way you don't have to make any exceptions for older browsers as it should just work.

.arrow2 {
  margin-top: -2px;
  width: 111px;
  height: 56px;
  background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

.arrow-inner {
  width: 111px;
  height: 56px;
  background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0;
}

arrow2.png still needs to be inverted for this to work - so that the arrow area is transparent and the outside not