html - 横幅图片涵盖了电子商务故事中的侧推车。如何防止这种情况？

Question

我的侧推车有问题，我确定我的 CSS 不正确，所以也许你可以帮我解决这个问题。

我在页面上有一个背景图片，一个全宽横幅。但是当我打开侧推车时，图像就会越过它。它覆盖了侧推车内的内容。

这是页面:http://innovo-medical.com/pages/about-innovo-medical

点击购物车打开侧边购物车并查看问题

HTML 就是简单的

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;
}

如果可能，请帮我找出错误!

非常感谢!

Answer 1

你可以去掉width，还有一个容器width: 1200px，如果你想让图像水平全屏，不要在图像中使用。

#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;
}

图像全宽技术

<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>

注意:与其复制代码，不如尝试去理解它