Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide

Question

Sorry for a lack of example on this one, but I figure it\'s easy enough to understand.

I have a fixed background on my site, which is currently implemented like this

Answer 1

I made this. I found that if you never really scroll the body/window you never trigger the autohide for Chrome. So wrap the content in a bigger div and just scroll that and the autohide never triggers. BUT ALSO!!! The autohide never triggers. (Address bar is always there). Wouldn't doubt for second you could hide the address bar after this but then how does the user get the address bar back?

html, body {
  height: 100%; 
  overflow: hidden;
}
body {
  height: 100%;
}
#background {
  position: fixed;
  left: 50%;
  bottom: 0px;
  min-width: 100%;
  min-height: 120%;
  z-index: 0;
  background: url('background.gif');
  margin-left: -50%;
  background-position: center center;
  background-attachment: fixed;  
  background-size: cover;
}
#main_container {
  width: inherit;
  height: inherit;
  overflow-y: scroll;
}
.block {
  position: relative;
  text-align: center;
  background: transparent;
  height: 100%;
  z-index: 9;
}
.block {
  width: 100%;
  height: 100%;
  background: rgba(224, 224, 224, 0.4);
}
.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}
.centered {
  display: inline-block;
  vertical-align: middle;
}


  

    

      
Some text
    
  
  
  
    

      
Some text
    
  
  
  
    

      
Some text
    
  
  
  
    

      
Some text
    
  
  

    

      
Some text