Transparent color overlay on background image covers up the form fields

Question

I am playing with transparent color overlay on top of form fields that also has background image specified.

The problem I am having is that either color overlay or background image sits on top of the form and blocks the access to the form fields.

.frame {
    background: url(http://lorempixel.com/g/400/200) no-repeat;
    width: 200px;
    padding: 50px 80px;
    position: relative;
}
.frame:after {
    background: rgba(0,0,0,0.3);
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

I've come across similar issues here regarding the combined use of background-image and background-color with transparency but I guess my scenario is a bit different with form fields in play.

This is my JSFiddle if you are interested.

Answer 1

Because .frame:after is a new element (though it isn't shown in the HTML code), you're effectively putting a block-level element over the entirety of your form, which takes all the click events of your form. To combat this, you can make use of the CSS property pointer-events , specifically setting it to none . This will effectively instruct all clicks to go through the element and affect whatever's below it.

.frame:after {
    background: rgba(0,0,0,0.3);
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;

    //add this!
    pointer-events: none;
}

EDIT

If you're concerned about browser compatibility, simply switch the order of how you're applying the background image - set the background image on the pseudo-element and set its z-index to -1 , and give the frame a transparent black background.

.frame {
    background: rgba(0,0,0,0.3);    
    width: 200px;
    padding: 50px 80px;
    position: relative;
}
.frame:after {
    background: url(http://lorempixel.com/g/400/200) no-repeat;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: -1; /* put it behind the frame */
}

As @Havenard pointed out, though, this could give you grief if your full website makes use of z-index for design purposes, and may require some other z-index values to be adjusted to work properly.

Answer 2

As it was obvious, using :after to draw alpha over the background will miss the desired effect, because its not affecting the background alone but the element as an whole with everything inside it included.

But you can always do it the old fashion way, with multiple layers, each one with its own background. You can have an element with the image as background, and inside it create a new element with transparent background, and then you put your fields inside it.

And thats what you have:

http://jsfiddle.net/zVqE2/9/