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:

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;


#home:after {

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


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