Question

所以在较小的屏幕上，我的当前标题我已经设法使用@media css样式达到响应的大小。但是由于我的标题中的图像是背景图像，所以当我缩小它时它会重复。我尝试将其切换为封面，但图像切换回全尺寸，因此只显示图像的一小部分代码..这是我正在查看的代码;

页面 - http://outsidetheline.co.uk/01.html （专注于顶部图像标题容器）

HTML：

<section class="meta-wrapper parallax" style="background-image: url('content/single_blog_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
    <div id="page_header" class="mini-padding">
        <div class="container-fluid">


        </div>
    </div><!-- end page_header -->
</section><!-- end section -->

CSS;

@media only screen and (max-width: 767px)
.parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: contain;
}

@media only screen and (max-width: 767px)
#page_header .container-fluid {
    padding: 20rem 0 0;
}

背景图片css来自元素风格。我尝试了一些东西，比如margin：auto，cover而不是包含等等，但它会导致图像显示巨大而不是很合适。

Answer 1

使用background-repeat: no-repeat：

@media only screen and (max-width: 767px)
.parallax {
    position: relative;
    background-attachment: fixed;  
    background-size: contain;
    background-repeat: no-repeat;
}

Answer 2

你需要：

background-repeat: no-repeat;

响应式标题图像在较小的屏幕上重复

2 个答案: