I was wondering on how I can have a background but when you scroll down it would just move the middle section which would be a different color and all the main information.
you simply make a div, and below another div, as you scroll down the other div (which you give a different background color) will come into view
If you are referring to using a fixed background image while only the centered main content will scroll, here’s how to do it using css:
body {
background-image: url('your-image.png');
background-repeat: no-repeat;
background-attachment: fixed;
}