Clever Geek Handbook

Semantic background image

Right now 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 followin 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 am getting this result. enter image description here

It looks pretty pixelated.

+3


source to share


1 answer


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



+1


source






More articles:


All Articles