не могу отцентрировать мое фоновое изображение при изменении размера экрана на размер экрана смартфона

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.

Я бы также предложил использовать 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>

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;  to .prime class