0

I have this div.

.a {
  background-image: url(url_image);
  height: 400px;
  background-position: bottom;
  background-attachment: scroll
}
<div class="a">
  <div class="b">
    <div class="content1">
    </div>
    <div class="content2">
    </div>
    <div class="content3">
    </div>
  </div>

The .a image has an irregular border:

enter image description here

I need to put a background-image to div .b and obtain something like this:

enter image description here

Is this possible?

hungerstar
  • 21,206
  • 6
  • 50
  • 59
Ajex_12
  • 47
  • 9
  • Have you read the following articles? [Other SO question](http://stackoverflow.com/questions/18792402/css-webkit-mask-image), [CSS Tricks' approach](https://css-tricks.com/clipping-masking-css/), [HTML5 Rocks Article](https://www.html5rocks.com/en/tutorials/masking/adobe/). I believe it is possible, but do not exactly know how. Don't know if any of the articles would help you, thats why I posted this as a comment instead of an answer. – Douwe de Haan May 08 '17 at 14:17

1 Answers1

0

You need to flip the two images. The background image needs to go into .a and the irregular border image need to be in .b. Think of this as painting a picture, you start with the background then add the foreground. The foreground image needs to have a transparent background so you can see through to the background image. (This would be the blue part of the irregular background image above)

.a {
  background-image: url(myImage);
  background-size: 100% 100%;
  height: 400px;
  background-position: bottom;
  background-attachment: scroll
}
.b{
    background-image: url(irregularBorder);
    background-size: 100% 100%;
    height: 400px;
    background-position: bottom;
    background-attachment: scroll;
}
Nick
  • 1
  • 1