Semantic Background Image

Question

I'm trying to create a header with an image on it, using semantic.

This is my 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>

With the following css

.landpage-image{
      height: 55%;
}

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

But I'm getting this result:

Which looks pretty pixeled.

Answer 1

Setting your background to cover will stretch the image. If the image is a jpeg (or any other raster image) and is not as wide or tall as your container is, it will stretch thus causing pixelation.