So I have an image which is 700px width which is what I'm using as a background image in a div which is 200px width.
I want to keep the image at that size so it can maintain a good resolution for smaller devices.
However the issue I'm having is because the image is larger than the div the image overflows (hidden) but I want the image to resize and fit depending on the size of the div, instead of overflowing.
My div is currently:
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;