title: How to stop background image repeating for empty space?
body: <p>Just ran into a problem with repeating background image. </p>
  
  <p>In the case when the content is very short, shorter than the monitor height, the background image is still repeating for the extra space. </p>
  
  <p>Please refer to the screenshot. </p>
  
  <p>Orange bar is my footer. The bottom grey area is the extra space.</p>
  
  <p>Can I make stop the background image repeating for the bottom area?</p>
  
  <p>I mean ideally the background image just repeats as long as my content. </p>
  
  <p>Any help will be appreciated. </p>
  
  <p><img src="https://i.stack.imgur.com/TJKkN.png" alt="My Image">.</p>