Question

It probably requires a workaround, or extra elements to achieve, but I’ll ask anyway.

I have a simple image. The image is split into two diagonally. The top is a solid color and the bottom is transparent. If I apply the following code, the background color fills in the transparency of the image. Is there a way to position the color or not have it show through where my image area is and instead just fill the remainder of the element?

#content:before {
    position: absolute;
    z-index: -1;
    bottom: -35px;
    content: "";
    width: 35px;
    height: 465px;
    left: -35px;
    background: #121314 url(library/images/content-fold-left.png) 0 bottom no-repeat;
}

Answer 1

Use CSS3 Gradients:

html, body {
  height: 100%;
}

body {
  background: -webkit-gradient(linear, 50% 0%, 50% 100, color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, #fa8072));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
}

Here is a demo.

You’ll notice I used Sass and Compass. The different gradient syntaxes are a nightmare, but with Sass and Compass, all you have to write is:

body
  +background(linear-gradient(top, rgba(0,0,0,0) 100px, salmon 100px))

And it will compile all the vendor prefixes and different legacy syntaxes for you.