การจัดกึ่งกลางภาพพื้นหลังโดยใช้ CSS

ฉันต้องการจัดวางภาพพื้นหลังไว้ที่กึ่งกลาง ไม่มีการใช้ div นี่คือCSSสไตล์ :

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

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

มีข้อผิดพลาดในรหัสของคุณ คุณกำลังใช้รูปแบบซินแท็กซ์แบบเต็มรูปแบบและสัญลักษณ์แบบย่อบนคุณสมบัติภาพพื้นหลังนี่เป็นสาเหตุให้ไม่ต้องทำซ้ำเนื่องจากไม่มีค่าที่ถูกต้องสำหรับคุณสมบัติภาพพื้นหลัง

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;

ใช้ทั้งสองกึ่งกลางภาพของฉันบนแกน x และ y

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

สิ่งเดียวที่ใช้ได้ผลสำหรับฉันคือ ..

margin: 0 auto