Отзывчивые изображения заголовков, повторяющиеся на меньшем экране.

Question

Итак, на небольших экранах мои текущие заголовки мне удалось свести к размеру, который мне нужен, используя стиль @media css для отзывчивости. Но поскольку изображение в моих заголовках является фоновым изображением, оно повторяется, когда я сжимаю его. Я попытался переключить его на обложку, но изображение переключается обратно в полноразмерный, поэтому вместо него отображается только небольшой фрагмент изображения. Вот код, на который я смотрю;

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

Answer 2

Использования background-repeat: no-repeat:

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