Currently, I am facing an issue with resizing my background image. The image does not distort when resized, which is good, but it also does not crop as desired. For instance, there is a banner at the top of the page with a graphic on the left side. When I resize the window from the left to the right, the graphic stays fixed on the left side of the screen. My goal is to have the image and all website content cropped when resizing, so that the browser does not attempt to squeeze everything onto the smaller page.
Here is the CSS code for the background image:
body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0; }
It's worth noting that all content will be centered on the web page, in case that information helps with finding a solution.