divide divs with relative positioning?

advertisements

Is it possible to overlap divs with CSS without using absolute coordinates -- that is, with relative positioning?

I have a background image I split into 3 vertical pieces,

  • 1st one is left-aligned,
  • 2nd one repeats across the middle,
  • 3rd one is right-aligned

Then I want to have my main site content on top of that, centered. I'm not sure how to do this without using absolute positioning.

      Kinda like this

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|shakeyour<body></body>|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

      Different symbols = differnt background image or pattern

I was thinking about having the backgrounds just as three divs, and then have the body div positioned absolutely, but I want it to be centered for widescreen displays. Any ideas?

For example, the expected behavior under resizing:

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$|--------------------------|&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|  shakeyour<body></body>  |&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|--------------------------|&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

---  

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$|------------------------------|&|
|$|                              |&|
|$|                              |&|
|$|   shakeyour<body></body>     |&|
|$|                              |&|
|$|                              |&|
|$|------------------------------|&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|


body {
   padding: 50px 20px;
   box-sizing: border-box;
}