мое изображение не помещено в качестве полного фона IMG в HTML-странице

Question

это код, который я написал, и он не работал, моя проблема здесь в том, что код работает, но изображение не выглядело так, как предполагалось

 .about-bg{  
   background: url(../img/about.jpg) no-repeat top center fixed !important;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: 100%;
   background-position: top center;

   }

это не очень хорошо

это результат, который у меня был

Answer 1

Из вопроса, который я предполагаю, вы хотите, чтобы изображение занимало весь фон. Я попробовал ваш код на нескольких рисунках, кажется, это потому, что размеры рисунков не соответствуют экрану, поэтому попробуйте этот код и посмотрите, поможет ли это.

.about-bg {
  margin:0;
   background: url(backpic.png) no-repeat;
   width:100%;
   height:100%;
   overflow:hidden;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
   }

Answer 2

попробуйте удалить! Важный.Это должно позволить вам взять 100% ширины

Answer 3

Не могу сказать по вашему вопросу, но вы должны убедиться, что поля тела и отступы установлены равными нулю, если вы хотите, чтобы какой-либо элемент на странице покрывал всю страницу.

Если этот элемент содержится вдругой элемент, этот элемент должен позволять изображению расширяться за его границы, или этот элемент также должен быть полноразмерным.

Вот пример, который устанавливает сплошное синее изображение в качестве фонового изображения в пределах div:

body {
  margin: 0;
  padding: 0;
}

.about-bg {
  background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

<div class="about-bg">&nbsp;</div>