Overlapping image with footer

I have a design here that is part of a website footer. https://ibb.co/mBRpx7Y

The website has a box kind of layout with a dark background. But in the footer, at the bottom right corner, there is an extra image pattern comes which will overlap the content section and also covert the background part.

Right now, I used CSS to achieve this by adding two background images. The image position is correct but the image pattern does not appear on the white container because it is not transparent. Is there any way to achieve this? Here is the sample code of what I have right now:

body{
      background-image: url(https://www.nicepng.com/png/full/10-102760_dot-background-png.png),url(https://images.unsplash.com/photo-1508615070457-7baeba4003ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80) !important;
    background-size: auto, cover!important;
    background-position: right bottom, left top!important;
    background-repeat: no-repeat!important;
        background-attachment: scroll, scroll;
  
}

.container{
  max-width: 1500px;
  margin:0px auto;
}
.section1{
  min-height:200px;
  background: #b0f3ff;
  padding:50px;
}
.section2{
  min-height:150px;
  background: #fff;
  padding:50px;
}

<div class="container">

<div class="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et mi ante. Etiam gravida tincidunt magna vestibulum rutrum. Phasellus a libero vulputate, malesuada nunc non, efficitur leo. Fusce porttitor nisl in fringilla lacinia. Fusce a sem sagittis enim imperdiet pretium at a diam. Aliquam et lacus quis augue sodales venenatis eu id justo. Phasellus et blandit felis. Proin in purus lectus.
</div>
<div class="section2">
Terms and Conditions
Privacy Policy
©2021 All rights reserve
</div>
</div>

CodePudding user response：

You can use pseudo element on body e.g.: body:after {}. Make it absolute to bottom right corner and add this dotted background to it instead of on body.

body {
    background-image: url(https://images.unsplash.com/photo-1508615070457-7baeba4003ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    margin: 0;
}

body:after {
    content: '';
    background-image: url(https://www.nicepng.com/png/full/10-102760_dot-background-png.png);
    width: 380px;
    height: 384px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.container {
    max-width: 1500px;
    margin: 0px auto;
}

.section1 {
    min-height: 200px;
    background: #b0f3ff;
    padding: 50px;
}

.section2 {
    min-height: 150px;
    background: #fff;
    padding: 50px;
}

<div class="container">

    <div class="section1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et mi ante. Etiam gravida tincidunt magna vestibulum rutrum. Phasellus a libero vulputate, malesuada nunc non, efficitur leo. Fusce porttitor nisl in fringilla lacinia. Fusce a sem sagittis enim imperdiet pretium at a diam. Aliquam et lacus quis augue sodales venenatis eu id justo. Phasellus et blandit felis. Proin in purus lectus.
    </div>
    <div class="section2">
        Terms and Conditions
        Privacy Policy
        ©2021 All rights reserve
    </div>
</div>

CodePudding user response：

Is this the kind of effect you're looking for?

.container{
  max-width: 1500px;
  margin:0px auto;
  position: relative;
}
.section1{
  min-height:200px;
  background: #b0f3ff;
  padding:50px;
}
.section2{
  min-height:150px;
  background: #fff;
  padding:50px;
}
.section3 {
  background-image: url(https://www.nicepng.com/png/full/10-102760_dot-background-png.png),url(https://images.unsplash.com/photo-1508615070457-7baeba4003ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80) !important;
    background-size: auto, cover!important;
    background-position: right bottom, left top!important;
    background-repeat: no-repeat!important;
        background-attachment: scroll, scroll;
  width : 100%;
  height : 100%;
  z-index : 2;
  opacity:0.5;
  bottom:0;
  top:0;
  position: absolute;
}

<div class="container">
  <div class="section3" ></div>
<div class="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et mi ante. Etiam gravida tincidunt magna vestibulum rutrum. Phasellus a libero vulputate, malesuada nunc non, efficitur leo. Fusce porttitor nisl in fringilla lacinia. Fusce a sem sagittis enim imperdiet pretium at a diam. Aliquam et lacus quis augue sodales venenatis eu id justo. Phasellus et blandit felis. Proin in purus lectus.
</div>
<div class="section2">
Terms and Conditions
Privacy Policy
©2021 All rights reserve
</div>
</div>