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.
Comments
Post a Comment