背景图像的垂直 alignment 问题（background-position-y 属性）

Question

I want to keep my background vertically-aligned (center) for all resolutions of screen. Always in the middle. So i use background-position-y property as "center".

Here is my css:

body {
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg-1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: center !important;
opacity: 1;
    }

But i see that my background is vertically on the top, not in center. What is wrong?

Here is jsfiddle - https://jsfiddle.net/opfbn72v/

Answer 1

If You want make it center try with this CSS Code:

body {
        background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg- 
        1024x576-small.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-attachment: fixed;
        background-position: center;
        opacity: 1;
      }

And If you want to use background-position-y then you have to place the image inside the div tag and then you can use background-position-y center like:

        div {
              background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083- 
              bg-1024x576-small.png');
              background-repeat: no-repeat;
              background-size: 100% auto;
              background-attachment: fixed;
              background-position-y: center;
              opacity: 1;
            }