multi-background :after longer than parent in chrome

Monday, June 30, 2014

okay, so Right now, I have a background image with an :after that overlays a transparent solid color, The solid transparent layer is extending past its section, works fine in FF but not Chrome.


Imgur pic to explain it all:


imgur.com/kINvroX


CSS Code



#home {

background: url("/gallery/imgbhbg.jpg") no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden;

}

#home:after {

content: "";
background: rgba(0,0,0, 0.7);
position: relative;
z-index: 1;
}


html



<section id="home">

<div class="info-box" id="home-layer">
<div class="container">
<div class="row" >
<div class="col-md-12">
<article id="home-text"><p>

<a href="http://ift.tt/Wao6TO" id="logo"><img src="http://ift.tt/15MsWkt"></a>
<h1 class="slatetextdone">
<span class="slatetext" id="strongslate">
Lorem Ipsum
</span>
</h1>
<h2 style="color: #9DD3DF">In in velit quis arcu ornare laoreet. Nam nibh. Nunc varius facilisis eros
.</h2>
<a href="{{ URL::route('home') }}"<button type="button" id=" " class="btn btn-primary btn-lg">Link To Home</button></a>
</p>
</article>
</div>
</div>
</div>
</div>

</section>






http://ift.tt/1x8OX7n