CSS textarea image background with opacity without impacting the foreground text

Question

I have a textarea that user can change its size.

I need to have an image background for it but I do not want the image disturbs the text so the image should be partially transparent without impacting the opacity of the text that user can type on top of it.

I followed this link which suggests using ::before but it does not work on my Firefox browser.

<textarea class="hero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>

CSS

.hero {
    position: relative; 
    /* height: 100vh; */
    /* width: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

https://jsfiddle.net/z86yfLvh/1/

How should I fix this?

Answer 1

The easiest solution here would be wrapping your textarea element into a container, put background on it and tune the background of your textarea down, through background-color with alpha inside the rgba() .

Like this:

 .hero { background-color: rgba(255, 255, 255, .7) }.hero-container { background-image: url('https://placekitten.com/1200/800'); background-size: cover; display: inline-block; }

 <div class="hero-container"> <textarea class="hero"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </textarea> </div>

I should mention also that ::before won't work with textarea because it would have to render it inside the textarea which can't contain any HTML elements directly. It's a hard limitation.

---

Alternative solution that also solves another issue that OP mentioned in the comment:

 .hero { background-color: rgba(255, 255, 255, .7); width: 100%; height: 100%; resize: none; }.hero-container { background-image: url('https://placekitten.com/1200/800'); background-size: cover; resize: both; overflow: auto; width: 100%; }

 <div class="hero-container"> <textarea class="hero"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </textarea> </div>

I'm using resize: none on textarea to disable the ability to resize it and I'm adding it to the container instead, while width: 100%; height: 100% width: 100%; height: 100% makes sure textarea stretches with the container too.