[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*/또는 몸 min-height을 100 %로 설정하면 50 %를 사용할 수 있다고 생각합니다 .

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;

이것은 당신을 위해 속임수를 할 것입니다.