Can this layout be achieved?

HTML & CSS
1

I have a wrap that is centered on a page. Beneath it have another wrapper with a different width. I need to place basically, another div behind both of them that is also centered within the body. I’m not sure this can be set up.

If I set up a div with position: absolute, I can almost achieve this but I am unable to center it within the body. In a sense, I need another wrapper behind these others, with a different width. The blue box in the example represents the area with which I’m trying to place content. I just need a layer/div that exists behind the others and is centered.

Any ideas? Thanks in advance.

2

That should be easy to do. I would simply wrap another div around the ones you have and center it. Just put the blue image on it as a background, make it non-repeating and offset it from the top by the amount desired. I definitely wouldn’t go down the pos: absolute path. That’s much more likely to have issues on various devices.