Set background image in the center for all window size-CodePudding

according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.

But I don't want like this (Because the image is not centered, it just starts from the corner.):

background-size: center cover;

CodePudding user response：

Your attempt looks like you try to do it with a OneLiner.

body {
  background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
  height: 100vh;
}

<body>
  <div>
    hello World
  </div>
</body>

CodePudding user response：

background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio. then remove the margin and padding from the element's parent try to separate each term, like this

background-size: cover;
background-position: center;

CodePudding user response：

try using margins

I have defined a css for you

.image{ width: 40%; height: 40vh; margin-top:30vh; margin-left: 30%; } u can change the width and height of image but remember change margin top and margin left by half.

CodePudding user response：

I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.

background-image: url(path/to/image);
background-size: cover;
background-position: center center;