How css fits the background image perfectly into the viewport

Xiaobian to share with you how css background image perfect fit viewport, I believe most people do not know how to share this article for your reference, I hope you read this article after a lot of harvest, let us go to understand it!

Fit background image perfectly to viewport

Let's start with something more than skill. How many times have you had to struggle with your background image to get it to fit perfectly without stretching or attraction?

Here's how to make your background image always fit perfectly in the browser window!

css

body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394? ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} That's all for the article "How CSS fits background images perfectly into viewports." Thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!