Dynamic text clips portion of transparent background image

HTML & CSS
1

I have a transparent background image, with a div over the top of it containing dynamic text. As the user types, I need the background image to be clipped in that section of the image, leaving fully transparent area behind the text.

At the moment I’m using a background colour to mask the background image, but this is not a viable solution for my end purpose, the text section overlaying the background image needs to be completely cliped. Is this possible? I’ve attached a image to illustrate what I want to achieve.

2

Do you mean something like this?

I suppose it all depends on what your horizontal image is though.

1 Like
3

Hi Paul, thanks for the reply. I actually need the overlay div to somehow make the portion of the background image behind the overlay div to be completely transparent / clipped as well. Imagine two brick walls one in front of the other, I want to punch a whole through both walls (not just the first wall). There is a very specific reason I need the portion of the back image to be completely transparent as well. Any idea’s?

4

I should say as well the overlay div will be a dynamic width depending on how much the user types, so I can’t make the portion of the background image transparent upfront, the overlay div has to clip the background div on the fly.

I looked at this…
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-clip&preval=padding-box

But it seems to do the inverse of what I need, this clips the outside of the background image, instead I want to clip the portion of the background image within the content, not the portion outside the content. Hopefully I’m making sense!

5

Hi,

You can’t hide something that is under the element you are placing. If you look at my example the middle section is transparent because I have made the outer ‘line’ sections start before and after the element.

You could do the same with your image by placing it in the before and after sections as in my example. However as I mentioned in my first post I’d need to see what your image looks like and if its a picture of some sort rather than a blue line or gradient then the solution may not be appropriate. The original image you posted certainly fits into the example I posted.

6

Would it be possible to make the background of your text input the same as whatever background is behind the two elements you want to punch out?

7

That will be no use either I’m afraid.

8

This may not be the exact same scenario you have, but to demonstrate the principle of what I mean, see this page.
http://www.boatintercoms.co.uk/testimonials
The quotes appear to have a window to the main background which punches out the white background of the main container. In reality, those quotes are totally opaque and the background image is just a copy of the body’s background giving the illusion of transparency.

1 Like
9

Sam’s example above is basically one of the choices you have. (It was similar to an old demo of mine which punched holes in the background.)

The choices seem to be this:

  1. You use a background to mimic the background you want as in Sam’s example.

  2. You cover the background with another background to rub out the image underneath.

  3. You make the background start and stop either side of the text as in my example.

I don’t believe there are any other choices although there may be variations on the above.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.