How to make a background image appear on either side of a cetered html page?

Question

i needed to know how you can make a image appear on either side of HTML content that's been centered on the page. for example a company logo as the background but the HTML content is in the middle and the logo is over lapping a background and is split from the middle and is showing on either side of the HTML content. for a better example the unicorn in stack over flow's Y2K event how it was appearing on both sides of the page. enter image description here

Answer 1

Use the image twice with multiple backgrounds and calc for positioning them. In the example there are 2 different positions (windows edges and content div edges):

 body { background:url(https://i.imgur.com/UFoVTPB.jpg),url(https://i.imgur.com/UFoVTPB.jpg),url(https://i.imgur.com/UFoVTPB.jpg),url(https://i.imgur.com/UFoVTPB.jpg); background-size:50px,50px,50px,50px; background-position: -25px 10px,calc(100% + 25px) 10px,calc(50% - 100px) 150px, calc(50% + 100px) 150px; /* considering 'i' as the image width and 'c' the container outer-width (with paddings and borders considered depending on the box-sizing defined): half-image on html left -> calc( 0 - [i/2] ) half-image on html right -> calc( 100% + [i/2] ) half-image on content left -> calc( [50% - {c/2}] ) half-image on content right -> calc( [50% + {c/2}] ) */ background-repeat:no-repeat; padding:0; margin:0; } div { width:200px; height:200px; background:#eee; padding:10px; box-sizing:border-box; margin:auto; } 

 <div>content</div>