css background-image to continue from a div to another

Question

I'm looking for a way to have a png background image (with transparency) to start a first div ( with colored background ) and to continue in the next div but where it stopped from the previous div.

Let's say we have this structure :

<section>
   <div id="1">some text</div> <!-- background-image starts at the top and ends at the end -->
   <div id="2">some text</div> <!-- same background-image starts where it ended in #1 -->
</section>

but div #1 and #2 have colored background. We can have colored background AND background-image but I need to make sure the background image starts in div#2 where it stopped it div#1 and it has to be responsive of course.

I can't use background-image on section because DIVs have colored background and that will hide the background-image from section .

The goal is to use CSS only, but if the only way is to use javascript/jquery, why not. The problem if I use simple background-image on #1 and #2 is that the image will cut itself at the end of #1 and starts again at #2. And I can't use another absolute div because I need to be able to select the text or click the buttons in the DIVs

Here is an image to illustrate the idea.

• div#1 is filled with yellow, #2 is red.
• background-image is the green triangles with transparent background, just the triangles.
• you can see that the last triangles that are at the bottom of #1 would continue in #2.

Answer 1

You could use an absolutely positioned pseudo element to host the background image, though it would require another level of nested elements.

 section { position: relative; } section::before { content: ""; background: url(https://placehold.it/100x100) repeat; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .5; } section > div > div { position: relative; /* Pull the content above the ::before */ } section > div:nth-child(1) { background: red; height: 200px; } section > div:nth-child(2) { background: yellow; height: 300px; }

 <section> <div id="1"> <div> some text </div> </div> <div id="2"> <div> some text </div> </div> </section>

Answer 2

And I can't use another absolute div because I need to be able to select the text or click the buttons in the DIVs

to solve this problem exists pointer-events: none; and can be used to disable click events on elements with simply css, which allows to select or click stuff under the disabled element.

Here's my code with this solution:

 section { width: 300px; height: 500px; background: gray; padding: 10px; position: relative; } .half { height: 50%; } .yellow { background: yellow; } .red { background: red; } .overlay { top: 0; position: absolute; height: 100%; width: 50px; background-image: url('https://www.transparentpng.com/thumb/triangle/793jA5-green-triangle-transparent-background.png'); background-repeat: repeat; background-size: 50px; pointer-events: none; }

 <section> <div class="half yellow"> you can select me <br> <button> you can click me </button> </div> <div class="half red"> you can select me <br> <button> you can click me </button> </div> <div class="overlay"></div> </section>