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

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

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

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

Ответы

Ответ 1

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%;
}

Ответ 2

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

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;
}

Ответ 3

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

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

Ответ 4

Try

background-position: center center;

Ответ 5

В вашем коде есть ошибка. Вы используете сочетание полного синтаксиса и сокращенной нотации в свойстве 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;
}

EDIT: для проблемы с масштабированием изображения вы можете посмотреть ответ на этот вопрос.

Ответ 6

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

Не вертикально центрирует фоновое изображение при использовании html 4.01 'STRICT' doctype.

Добавление:

background-attachment: fixed;

Зафиксировать проблему

(Итак, Александр прав)

Ответ 7

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

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

Ответ 8

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

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

Ответ 9

Была та же проблема. Используемые свойства отображения и поля, и он работал.

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

Ответ 10

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

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

с

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

Ответ 11

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

margin: 0 auto