Give side margins to a background Position

Question

I want the background image I am using to have 10px margins. But every time I try, it only works on the left side. How can I give my background image equal space on each side?

.login-page {
  display: flex; 
  flex-direction: column;
  background: url("../src/Assets/images/Books-background.jpg");
  background-size: cover;
  background-repeat: no-repeat; 
  height: 100vh;
}

Answer 1

Hou probably need 2 containers. Set a padding on the parent and the background on the child.

here an example with html & body, but it could be a div within another div, the method remain the same , padding on the parent, background cover on the child. .

html {
  background: white;
  padding: 0 10px;
}
body {
  margin: 0;
  min-height: 100vh;
  background: url(https://picsum.photos/id/20/3670/2462) center / cover
    /*padding-box no-repeat bgcolor  have no effect on background:cover ... */;
}