CSS를 사용하여 배경 이미지 중심 맞추기

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-height100%까지.

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;

background-position: center center;

나한텐 안 통해요

background-attachment: fixed;

x축과 y축에 중심을 맞춘 내 이미지를 모두 사용합니다.

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

위의 답변에 만족하지 않으면 이를 사용합니다.

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

내게 유일하게 효과가 있었던 건..

margin: 0 auto

언급URL : https://stackoverflow.com/questions/2643305/centering-a-background-image-using-css