Menu
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,
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> |&|
|$| |&|
|$| |&|
|$|------------------------------|&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
625
body {
padding: 50px 20px;
box-sizing: border-box;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
