Центрування фонового зображення за допомогою 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. Це спричиняє ігнорування неповторного повторення, оскільки це невірне значення для властивості 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 "STRICT".

Додавання:

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

Була така ж проблема. Використовували властивості відображення та поля, і це спрацювало.

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

використовуючи як зосереджене моє зображення на осі х і у

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

Єдине, що працювало для мене, це ..

margin: 0 auto