Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

html - How to make all backgrounds have a background-size: cover?

On my body, I have 3 images displayed horizontally.

Each image takes up 33% width.

Together, these 3 images take up the entire webpage.

How can I make these 3 images have a background size of cover, so their aspect ratio's are maintained?

body {
    background-image: url(https://images.pexels.com/photos/1546166/pexels-photo-1546166.jpeg),
                      url(https://images.pexels.com/photos/87223/pexels-photo-87223.jpeg),
                      url(https://images.pexels.com/photos/280221/pexels-photo-280221.jpeg);

    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left, center, right;
    background-size: 33% 100%, 34% 100%, 33% 100%;
    width: 100%;
    height: 100vh;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...