title: CSS full screen background image size
body: <p>I am new to HTML and CSS. Just learnt some basic stuff. Hope someone can give me some help and suggestions on this headache issue.</p>
  
  <p>I am working on a webpage that requires a full screen background image. I am now using "height: 100%" on both selectors: html and the section that contains the background. It looks good when I resize the browser's width, but when I resize my browser's height, the background's height collapse too. I guess what I want to accomplish is: </p>
  
  <ol>
  <li>when the browser window is maximized on any screen size, the background is full screen without horizontal scroll bar.</li>
  <li>when the browser window gets a small width, the background image will always centers in the background.</li>
  <li>when the browser window gets a small height, don't collapse the height and show the vertical scroll bar. Because I got some text on the background. I don't want the text to go to the other section.</li>
  </ol>
  
  <p>And also please give some suggestions on how I can develop a webpage that is friendly to any screen size and any resizing actions on any screen. Any package? any tool?</p>