Question

我正在尝试使用媒体查询使我的背景图像响应，但我尝试的一切都不起作用！我的网站是一个水平滑动网站，所以所有页面都定义为index.html中的一个部分，背景图像在部分标签内声明。我正在使用bootstrap，但是我被告知（通过工作）使用媒体查询而不是col col ..类。这是我的代码：

    <section class="section home-section" data-title="home" id="home" style="left: 1278px; background-image: url(img/home_bg.jpg); background-color: rgb(247, 247, 247);">
    <div class="main-content-home-box">
        <h1 class="title">what is cookinkits?</h1>
        <p class="main-content-home">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div><!-- /.what-is-cookinkits -->


    <div class="latest-news-box">
        <h1 class="title">check out the latest news here...</h1>
    </div>
</section><!-- /.home page -->


section.home-section {
    width: 100%;
    height: 100%;
@media screen and (min-width: 767px) {
    background-size: cover;
    margin-top: -100px;
}
@media screen and (min-width: 980px) {
    background-size: cover;
    margin-top: -100px;
}

}

使用媒体查询使背景图像响应

0 个答案: