Semantic Background Image

Question

Прямо сейчас я пытаюсь создать заголовок с изображением на нем, используя семантику.

Это мой HTML

<div class="ui inverted vertical segment landpage-image"> 
    <div class="ui page grid"> 
     <div class="column"> 
      <h1 class="ui title-header"></h1> 
      <div class="centered grid slogan"> 
       <div class="column"> 
        <p>Some content over here</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

С followin CSS

.landpage-image{ 
     height: 55%; 
} 

.landpage-image{ 
    background-image: url(/images/landpage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
} 

Но им получить этот результат.

Это выглядит довольно пиксельно.

Answer 1

Установка фона для покрытия растягивает изображение. Если изображение является jpeg (или любым другим растровым изображением) и не таким широким или высоким, как ваш контейнер, оно будет растягиваться, тем самым вызывая пикселизацию.