CSS和固定背景不工作

Question

我对右边的图片很满意。

​

​

我的照片有950像素的高度。我希望它能和卷轴同时移动。

如果我添加了这个属性“背景-附件:固定的； "，它可以工作，但是图像被放大，我不想：

​

​

你能帮我吗？，我是

​

body {
    background: #f2f2f2;
    font-family: Open Sans, Helvetica, Arial, Tahoma, Sans-Serif
}

/*  --------------------------------------------------
/*  Text-transform
/*  --------------------------------------------------
*/
.content-image-left-right {
    background-color: #fff
}

.content-image-left-right h2 {
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-weight: bold;
    letter-spacing: .4rem;
    text-align: center;
    text-transform: uppercase
}

.content-image-left-right p {
    max-width: 450px;
    color: #605e5e;
    margin-right: auto;
    margin-left: auto;
    text-align: justify
}

.content-image-left-right .cover {
    height: 550px;
    background-image: url(https://img11.hostingpics.net/pics/422842background3.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

        <div class='content-image-left-right'>
            <div class="row">
                <div class="col">
                    <h2>
                        Gérer
                    </h2>
                    <p>
                        Grâce à notre solution <strong>complète et assistée</strong>, Dometech vous permet <strong>une gestion simple et centralisée de tous vos biens</strong>.
                    </p>
                </div>
                <div class="col cover background-3">

                </div>
            </div>
        </div>

​

Answer 1

​

body {
    background: #f2f2f2;
    font-family: Open Sans, Helvetica, Arial, Tahoma, Sans-Serif
}

/*  --------------------------------------------------
/*  Text-transform
/*  --------------------------------------------------
*/
.content-image-left-right {
    background-color: #fff
}

.content-image-left-right h2 {
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-weight: bold;
    letter-spacing: .4rem;
    text-align: center;
    text-transform: uppercase
}

.content-image-left-right p {
    max-width: 450px;
    color: #605e5e;
    margin-right: auto;
    margin-left: auto;
    text-align: justify
}

.content-image-left-right .cover {
    height: 550px;
    background-image: url(https://img11.hostingpics.net/pics/422842background3.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 550px 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

        <div class='content-image-left-right'>
            <div class="row">
                <div class="col">
                    <h2>
                        Gérer
                    </h2>
                    <p>
                        Grâce à notre solution <strong>complète et assistée</strong>, Dometech vous permet <strong>une gestion simple et centralisée de tous vos biens</strong>.
                    </p>
                </div>
                <div class="col cover background-3">

                </div>
            </div>
        </div>

​

Answer 2

您需要更改backgound-size: cover，并将其替换为图像背景尺寸的大小，例如，第一个值为宽度、第二个高度的background-size: 550px 300px