css - DFP Background Skin - can't get it centered -


i'm loading google dfp background skin ad unit. i've got showing correctly, cannot background image stay centered once web browser shrinks smaller width image width itself. rather image gets pegged left hand side of browse , collapses right left resulting in center content panel not being centered on background image anymore.

my html code is:

<div id="background-skin" class="desktop-ad"> <div id='div-gpt-ad-xxxxxxxxxxx-x'> <script type='text/javascript'>     googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxxxxxxxxxx-x'); }); </script> </div> </div> 

the css use is:

#background-skin { position: fixed; z-index: 1; width: 100%; height: 1600px; margin-left: auto; margin-right: auto; top: 0px; text-align: center; } 

one way desired effect setting fixed wrapper @ 50% horizontally, left, , no width needed. let grow content:

#background-skin {     position: fixed;     z-index: 1;     height: 1600px;     top: 0px;     left: 50%; } 

then, misplace child -50% using left , position: relative;. like:

#background-skin > div {     position: relative;     left: -50%;     ... 

this way, container in middle of page, , content in middle of container.

see example fiddle


Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -