将我的屏幕尺寸更改为智能手机屏幕尺寸时无法将我的背景图像居中

Question

正在尝试创建我自己的响应式网站，但在我的网站背景图片方面需要帮助。谁能给我一些关于如何做到这一点的帮助/建议？

这是我在上得到的代码。html

        <section class="prime">
            <div class="inner">

                <div class="content">

                <h1>Travel and Coding</h1>

            </div>

            </div>

        </section>

并在.css

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open sans', sans-serif;
    background-color: #392b27; 
}


.prime {
    width: 100%;
    height: 100%;
    background: url("img/fishing-sunset.JPG");
    display: table;
    top: 0;
    background-size: cover;
}

.prime .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.content h1{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

p {
    font-size: 160%;
    line-height: 210%;
    text-align: justify;
    margin: 3%;
    font-family: sans-serif;
}

@media screen and (max-width: 768px) {
    .content h1 {
        font-size: 250%;
    }
    p {
        font-size: 100%;
        line-height: 160%;
    }
}

需要帮助使其居中，以便用户在使用智能手机时可以看到日落背景封面图片。

Answer 1

添加

background-position: center;  to .prime class

Answer 2

将 center 标签与 css 属性一起使用，如下所示：-

  background: url("img/fishing-sunset.JPG") top center;

此背景将始终居中显示所有屏幕尺寸。

Answer 3

尝试将 background position 设置为 center

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open sans', sans-serif;
    background-color: #392b27; 
}


.prime {
    width: 100%;
    height: 100%;
    background: url("https://www.w3schools.com/howto/img_parallax.jpg")no-repeat center;
    display: table;
    top: 0;
    background-size: cover;
}

.prime .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.content h1{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

p {
    font-size: 160%;
    line-height: 210%;
    text-align: justify;
    margin: 3%;
    font-family: sans-serif;
}

@media screen and (max-width: 768px) {
    .content h1 {
        font-size: 250%;
    }
    p {
        font-size: 100%;
        line-height: 160%;
    }
}

  <section class="prime">
            <div class="inner">

                <div class="content">

                <h1>Travel and Coding</h1>

            </div>

            </div>

        </section>

Answer 4

您可以使用 background-position: center。

我还建议使用 flexbox 而不是 display: table

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Open sans', sans-serif;
  background-color: #392b27;
}

.prime {
  width: 100%;
  height: 100%;
  background: url("https://unsplash.it/1200");
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
}

.content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.content h1 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #f9f3f4;
  text-shadow: 0px 0px 300px #000;
  font-size: 500%;
}

p {
  font-size: 160%;
  line-height: 210%;
  text-align: justify;
  margin: 3%;
  font-family: sans-serif;
}

@media screen and (max-width: 768px) {
  .content h1 {
    font-size: 250%;
  }
  p {
    font-size: 100%;
    line-height: 160%;
  }
}

<section class="prime">
  <div class="inner">
    <div class="content">
      <h1>Travel and Coding</h1>
    </div>
  </div>
</section>

将我的屏幕尺寸更改为智能手机屏幕尺寸时无法将我的背景图像居中

can't centre my background image when changing my screen size to smartphone screen size

html

css

responsive