使用stellar.js在移动设备上无法正确显示背景图像

Question

Hi guys I'm using stellar.js and it is working quiet well for desktop devices. But on mobile devices the background-image will be displayed only a part of it. It is not showing the whole image but the left corner of the image. The problem must be the css code. But I don't see it. Thanks for the help guys!

My css looks like:

.intro-section {
    padding: 150px 0px;
    text-align: center;
    background-attachment: fixed;
    width:100%;
    height:100%;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-image: url(../images/frederick_meseck_wood_logo.png);
    background-repeat: no-repeat;
}

@media(min-width:768px) {
    .intro-section {
        min-height: 100%;
    }
}

Answer 1

Try this in your media query:

@media(min-width:768px) {
    .intro-section {
        background-attachment: inherit !important;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

The first background-size parameter is the width, you can increase this value when going to smaller devices (I recommend this)