Семантическое фоновое изображение

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

это мой хтмл

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

Со следующим css

.landpage-image{
      height: 55%;
}

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

Но я получаю такой результат: введите здесь описание изображения

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


css background-image semantic-ui
person carloss medranoo    schedule 10.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

person Leo Bauza    schedule 10.06.2015
comment
Честно говоря, вы не задали вопрос. Я сделал все возможное, сообщив вам, почему ваше изображение пикселизировано, чтобы вы могли либо использовать не растровое изображение в качестве фона, либо использовать достаточно большое изображение, чтобы пикселизация не происходила. - person Leo Bauza; 11.06.2015