Search code examples
htmlcssformsbackground-image

How can you use a background image that does not cover form fields?

I have one page with several sections. On one of the section is a contact form.

<div class="watermark">
    <section>1</section>
    <section>1</section>
    <section>1</section>
    <section>... here is a form</section>
</div>

The page has a picture as a background, like a watermark. i have add it using the following css

.watermark::after {
    content: "";
    background: url(my_watermark.png) no-repeat;
    opacity: 0.1;
    top: 10%;
    left: 10%;
    bottom: 0;
    right: 0;
    background-size: 50%;
    position: fixed;
  }

The problem now is that the watermark blocks the fields in the form so that it is only possible to click in the field on the left side.

if I try to click into the field on the right side of a field, it is "blocked"

here is an live example: https://jsbin.com/xomowakuvi/edit?html,css,output

How can it be fixed? background image should be visible on each section when scrolling. that's why I used position: fixed

Solution

  • The problem is to do with layering. Simply set a z-index of -1 on your ::after to position it 'behind' your content, thus allowing your content to be selected instead of your watermark:

    .watermark::after {
  z-index: -1;
}