麻烦居中背景图片

Question

I'm having problems centering the background image within a certain div. I'm using the following code for CSS:

.background3 {
  max-width: 90%;
  height: 400px;
  margin: 0 auto;
  background: linear-gradient( rgba(86, 71, 71, 0.56), rgba(86, 71, 71, 0.56)), url(img/kitpage.jpg) no-repeat 50% 50%;
}

I've tinkered and tried, but to no avail. I'm pretty sure it's an easy answer, and thank you all in advance for your help and advice.

A screenshot of the problem is attached below

Answer 1

在CSS中使用以下内容：

display: block;

Answer 2

You have to use background position property eg:

.background3 {
  max-width: 90%;
  height: 400px;
  margin: 0 auto;
  background-position:20% 20%; // Margin background from top and left
}

You can adjust margin as you need but it's not a good way. If you want more proper way then try this:

.background3 {
  max-width: 90%;
  height: 400px;
  margin: 0 auto;
  background-size:auto 100%;
  background-position:center center;
}