Banner Image covers side cart in ecommerce story. How to prevent this?

Question

I have an issue with the side cart and I'm sure my CSS is incorrect, so maybe you can help me to figure it out.

I have a background image on the page, a full width banner. But when I open the side cart, the image goes over it. It covers the content inside the side cart.

Here's the page: http://innovo-medical.com/pages/about-innovo-medical

Click on cart to open side cart and see the issue

HTML is simply

CSS:

#header-image {
    background-image:url("{{ 'Ladyinblue Copy.jpg' | asset_url }}");
    width: 8980px;
    height: 450px;
    position: relative;
    margin: 0 auto;
    margin-left: -3999px;
    margin-right: 0;
    background-repeat:no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
    margin-bottom: 10px;
    overflow:hidden;
}

Please help me identify the mistake if possible!

Thank you so much!

Answer 1

You can remove the width, also you have a container width: 1200px, don´t use in the image if you want the image goes horizontal full screen.

#header-image {
    background-attachment: fixed;
    background-image: url("//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue%20Copy.jpg?12631246775371885148");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    margin: 0 0 10px -3999px;
    position: relative;
}

Image full width technique

<div class="container"> your header </div> // close container
<div id="header-image"></div>
<div class="container main content"> // open container again
<div class="sixteen columns clearfix collection_nav">
  <h1 class="collection_title">
    About Us
  </h1>
</div>

<div class="sixteen columns page">
    <p style="text-align: left;"><a href="http://innovo-medical.com">Innovo Medical</a>&nbsp;is a privately-held company located in Stafford, TX primarily involved in the design and manufacturing of <a href="http://innovo-medical.com">Medical Products</a>. The company was born out of frustration with companies cutting corners in the name of corporate profit. We believe that medical equipment&nbsp;should be reliable, safe and simple to use.</p>
<p>Customers’ feedbacks are the backbone of every product we launched. Our products have been wildly successful because we take every single customer’s feedback seriously. If you have any concerns or questions with our product, please contact our customer service team. We listen and We deliver. That is our promise.</p>
<br>
<div style="text-align: left;"><a title="Innovo Google Plus: Innovo Groups Medical Supplies" target="_blank" href="https://plus.google.com/u/0/+Innovogroups/posts"><span>Interact with Innovo on Google+</span></a></div>
<div style="text-align: left;"><a title="Innovo Facebook - Innovo Groups - Medical Supplies" target="_blank" href="https://www.facebook.com/InnovoG/">Like Innovo Products on Facebook</a></div>
<div style="text-align: left;"><a title="Innovo Twitter: Innovo Groups Medical Supplies" target="_blank" href="https://twitter.com/InnovoG">Follow Innovo Medical Equipment on Twitter</a></div>
<div style="text-align: left;"><a title="Innovo Pinterest: Innovo Groups Medical Supplies" target="_blank" href="https://www.pinterest.com/innovomedical/">Pin Innovo Medical Supplies&nbsp;on Pinterest</a></div>
<div style="text-align: left;"><a title="Innovo LinkedIn: Social Media | Medical Supplies | Innovo Groups" target="_blank" href="https://www.linkedin.com/company/10252810">News and Headlines from Innovo on LinkedIn</a></div>
<div style="text-align: left;"></div>
<div style="text-align: left;">More reviews at Innovo Google+ and Innovo Facebook pages</div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
</div>
</div>

Note: Instead of copy the code, try to understand it