CSS code to achieve background gradient and automatic full screen

CSS issues about background gradient and automatic full screen

The editor-in-chief discovered a fatal problem when developing CSS:
After setting the background color gradient, I finally adjusted it to full screen coverage, but when I pressed F11, the world of collapse began. So this article mainly introduces CSS background gradient color and automatic full screen adaptation

Background gradient color

This article only introduces linear gradient

I believe everyone is familiar with background gradient. Let’s take a look at the picture below.

The color I matched is also OK. The code is as follows

body{
    background-image:
    -webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));
    //60deg represents the angle of the gradient color. You can try it yourself. //The gradient color is the result of the last two color combinations. Of course, you can also set the third one.}

Background full screen

As you can see above, the gradient background is not full screen, which also affects the appearance. But at this time, someone must say that the editor did not set the width and height. Well, let's set the width and height to see the effect.

body{
    background-image:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));
    min-height:648px;
}

The effect is as follows:

So the problem is that when I press F11 to maximize the window:

Obviously the problem has not been completely solved, so here is the adaptive screen code for you

body{
    background-image:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
}
//The editor tested that Google Chrome and Xingyuan Browser can automatically adapt//You can take it home and do more experiments

The effect diagram is as follows:

This concludes this article about how to use CSS to implement background gradient and automatic full screen. For more information about CSS background gradient and automatic full screen, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!