title: Responsive design: How to resize images/background images and align divs vertically?
body: <p>I am experimenting with responsive design. My images are not currently resizing. In my markup, I also have background images applied to certain divs which needs to be resized.</p>
  
  <p>Here is the HTML view: <a href="http://jsbin.com/emojeg/2" rel="noreferrer">http://jsbin.com/emojeg/2</a></p>
  
  <p>See the code here: <a href="http://jsbin.com/emojeg/2/edit" rel="noreferrer">http://jsbin.com/emojeg/2/edit</a></p>
  
  <p>For screen width between 800px and 1100px, I'd like to resize the images. For anything below 800px, I'd like to align the picture frames vertically - 1 or 2 per row whatever the screen width permits.</p>
  
  <p>Currently when I resize the browser to the narrower width, up to 2 of the frames wrap to the next row but if I keep resizing further, the picture frame's background seems to cut off and some of the images seem to disappear. Not sure how to fix this.</p>