Центрирование фонового изображения с использованием CSS

Я хочу центрировать фоновое изображение. Div не используется, это стиль CSS :

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Вышеприведенные CSS-элементы разбиты на части и центрируют их, но половина изображения не видна, она просто движется вверх. То, что я хочу сделать, это центрировать изображение. Могу ли я принять изображение для просмотра даже на 21 "экране?

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Это должно работать.

Если нет, то почему бы не сделать divизображение и использовать z-indexего для фона? Это было бы намного легче центрировать, чем фоновое изображение на теле.

Кроме этого попробуйте:

background-position: 0 100px;/*use a pixel value that will center it*/Или я думаю, что вы можете использовать 50%, если вы установили свое тело min-heightна 100%.

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Я использую этот код, он работает хорошо

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Я думаю, что это то, что нужно:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

Пытаться

background-position: center center;

Как это:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

В вашем коде есть ошибка. Вы используете сочетание полного синтаксиса и сокращенной записи в свойстве background-image. Это приводит к тому, что no-repeat игнорируется, поскольку это недопустимое значение для свойства background-image.

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Должно стать одним из следующих:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

или

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

РЕДАКТИРОВАТЬ: Для вашей проблемы масштабирования изображения, вы можете посмотреть на ответ на этот вопрос .

Попробуй это background-position: center top;

Это поможет вам.

background-repeat:no-repeat;
background-position:center center;

Не центрировать фоновое изображение по вертикали при использовании html 4.01 «СТРИКТ» doctype.

Добавление:

background-attachment: fixed;

Должен решить проблему

(Так что Александр прав)

просто заменить

background-image:url(../images/images2.jpg) no-repeat;

с участием

background:url(../images/images2.jpg)  center;

если вы не удовлетворены ответами выше, используйте это

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Была такая же проблема. Использовал свойства display и margin и все заработало.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

background-position: center center;

не работает для меня без ...

background-attachment: fixed;

используя оба моих центрированных изображения по осям X и Y

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Единственное, что сработало для меня, это ..

margin: 0 auto