bootstrap css fit the background image with the screen-CodePudding

body {
   -webkit-font-smoothing: none;
     background: url('../img/logo.png') top left;
}

Bootstrap-CSS : I would like to create an authentication page and I want to use the image logo.png for the background but I couldn't adapt the image to the screen. For example if I reduce the screen of my window, the picture still have the same size. Thank you very much for your help !

CodePudding user response：

Like it was already suggested on the comments, you can use the background-size property for the.

I have created a small example for you...

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
}

h1 {
  font-family: sans-serif;
  color: white;
}

<body>
  <h1> Just a title</h1>
</body>

You can read about the background-size property here.

The background-size property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

In my example i have used background-size: cover which scales the image (while preserving its ratio) to the smallest possible size to fill the container

CodePudding user response：

SEE "CSS Background Size" on https://www.w3schools.com/css/css3_backgrounds.asp

background-size(property) will help u