CODEWITHSUNDEEP
htmlcssbackground-image
allumette
allumette

Reputation: 195

css background-image to continue from a div to another

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.

enter image description here

Upvotes: 0

Views: 1585

Answers (2)

bLuke
bLuke

Reputation: 194

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>

Upvotes: 1

Turnip
Turnip

Reputation: 36702

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>

Upvotes: 1

Related Questions