Background Image Placement

background image position

Try this:

.bg{
    background: url("Wave.png") no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background-attachment: fixed;
    overflow-y: scroll;
    background-size: contain;
    background-position: bottom;
}

EDIT:

<body>
     <div class="bg">
        <div>
            ...
        </div>
     </div>
</body>

Some explanations:
Setting background-attachment: fixed makes the background fixed on the page when you scroll.
The content should then be restricted within the div by setting overflow-y: scroll; so that, in your case where you have a table that can be longer than the div, the table will be constrained inside the div with scrolling enabled, and it won't extend outside the div.

background-position: bottom is also enough.

I notice the closing tag for your body element is a </div that is not enclosed properly. You should change the </div to </body>. If you already closed the body in your full code, you can remove the unnecessary </div

Position background image exactly halfway into screen

What ended up working for me is to set the background element to position:fixed and then set the width to 200%. This always keeps the image exactly halfway in the screen no matter what width the screen is.

.background {
  position: fixed;
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('https://marketing.dcassetcdn.com/blog/30-Famous-Triangle-Logos/google-drive-logo.jpeg');
  height: 75%;
  width: 200%;
}

<html>

<body>
  <div class="background">
  </div>
</body>

</html>

CSS3 background image placement

When using percent for background images, it doesn't work at all as one first think.

When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works

Use viewport height units vh instead

*{ color:white; font-family:arial; margin:0 !important; padding:0 !important;}body{ background-color:black; background-origin:border-box; background-image:url('https://unsplash.it/1064/800'); background-size:auto 25%; background-position:center 37.5vh; background-repeat:no-repeat; height:100vh;}h1{ text-align:center; position:absolute; top:62.5vh; right:0; left:0;}

<h1>CSS3 is Cool!</h1>

Background image positioning on desktop vs. mobile

Add this css to active theme style.css file.

@media (max-width: 767px){
    body.custom-background {
        background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
        background-position: 50% top;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 70% auto;
    }
}

Fixed position background image inside div

After some trying I came out with this one, BUT it's a JS solution, still will be very happy if anyone crack it with pure CSS.

Fiddle link https://jsfiddle.net/w4hz4cqf/31/

Changed CSS code a bit:

    .main
    {
      min-height: 1000px;
      width: 500px;
      margin: 0 auto;

    }

    .col1
    {
      width: 150px;
      min-height: 800px;
      display: inline-block;
      float: left;
    }

    .col2
    {
      width: 70%;
      min-height: 800px;
      display: inline-block;
    }

    .row1 .col1
    {
      background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important;
        //background-position: left !important;
        background-repeat: no-repeat !important;
        background-size: 100px 100px !important;
        background-attachment: fixed !important;
    }

    .row2 .col1
    {
        background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important;
        background-position: left !important;
        background-repeat: no-repeat !important;
        background-size: 100px 100px !important;
        background-attachment: fixed !important;
    }

    .row3 .col1
    {
        background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important;
        background-position: left !important;
        background-repeat: no-repeat !important;
        background-size: 100px 100px !important;
        background-attachment: fixed !important;
    }

Added JS Code:

    jQuery(document).ready(function(){
      backgroundImageSize = 100;

      elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 
      for(ind = 0; ind < 3; ind++) {
        elem[ind].getBoundingClientRect();

          elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
      }

      var width = $(window).width();
      $(window).on('resize', function(){
         if($(this).width() != width){
            width = $(this).width();
            elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 

            for(ind = 0; ind < 3; ind++) {
              elem[ind].getBoundingClientRect();
              elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
            }
         }
      });
    });

How to fix position of background image?

You can do something like this in CSS:

.search  input {
   background-size: 30px 17px;
   background-repeat: no-repeat;
   background-position: left;
   transition: .3s;
   background-image: url("https://i.stack.imgur.com/VtucQ.jpg");
 }

.search input:focus {
     background-position: left 50px; 
  }

and html

<div class="search">
    <input>
</div>

Background size is 30x17 beacuse image will not lose ratio. And on focus just animate position from image to hide it.

Image position equivalent to background position

I would do something like this to position the image centered.

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  overflow: hidden;
}

.img-container img {
  max-height: 100%;
  max-width: 100%;
}