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


148

배경 이미지를 중앙에 배치하고 싶습니다. 사용 된 div가 없으며 CSS 스타일입니다.

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

위의 CSS는 모든 타일과 중앙에 위치하지만 이미지의 절반은 보이지 않으며 위로 움직입니다. 내가하고 싶은 것은 이미지의 중앙에 있습니다. 21 인치 화면에서도 이미지를 볼 수 있습니까?


1
이제 이미지의 크기와 브라우저의 크기에 따라 달라지지 않습니까?
nikc.org

@nikc +1, 알고 있습니다 만, 해결 방법이 있는지 알아야합니다
X10nD

답변:


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

그것은 중앙 집중화를 수행하지만 만 표시 절반 화면, I에 유래가 스크린 샷을 첨부 할 수있는 옵션이 있었으면 좋겠다
X10nD

스크린 샷을 만들어 서버 나 photobucket.com과 같은 무료 사진 호스팅 사이트에 업로드하거나 www.jsfiddle.net에서 임시 예를 만들어 링크를 게시 할 수 있습니다. 당신이 말한대로 이미지는 1600x1200이며 대부분의 화면 해상도는 그렇게 높지 않습니다. 이미지 크기에 맞게 조정하십시오. 예를 들어 1440x900의 와이드 스크린 모니터를 사용합니다.
Kyle

스크린 샷 - imagevat.com/picview.php?ig=6179 나는 당신이 나를 도울 수 있다면, jsfiddle에 이미지를 업로드하는 방법을 잘 모르겠습니다 jsfiddle.net/yWrQP
X10nD

jsfiddle에 이미지를 추가하려면 전체 http 경로 EX를 사용하십시오 background-image:url(http://www.myurl.com/images/image.jpg);. CSS에 넣으십시오.
Kyle

나는 그것을 할 서버가 없지만 이미지 호스팅 사이트를 사용했지만 여전히 확인하십시오
X10nD

20

이 코드를 사용하면 잘 작동합니다.

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

감사! 난 등 ... 웹킷에 대해 서로 다른 선언이 있었다 몰랐
마이크 Rapadas

빅터, 나는 당신의 코드를 많이 사용했지만 지금은 작동하지 않는 것 같습니다. 백그라운드 첨부 파일을 추가했습니다 : 고정; 그러나 그것은 내 아이 패드 브라우저에서 작동하지 않습니다 ...
Vadim

-webkit-background-size그러나 특별 선언 에서만 존재합니다.
BigBang1112

16

나는 이것이 원하는 것이라고 생각 합니다 .

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

6
배경 첨부 파일이 문제를 해결 함;)
kdoteu

7

시험

background-position: center center;

이중 센터 센터는 어떻게 되나요? 어쨌든 그것은 여전히 ​​똑같은 문제를 해결하지 못합니다
X10nD

1
@Jean : 스펙을 보면 배경 위치는 실제로 2 개의 값 (가로 및 세로)을 사용할 수 있습니다. w3.org/TR/CSS2/colors.html#propdef-background-position
Rob van Groenewoud

@rob가 작동하지 않아 이미지가 바둑판 식으로 표시됩니다. 이미지는 1600x1200이고 내 화면 크기는 1280x800입니다.
X10nD

2
@Jean 배경 이미지의 크기를 조정할 수는 없습니다 (아직). CSS 3에서는 가능하지만 아직 충분히 널리 지원되지는 않습니다. center center와 나란히하는 background-repeat: no-repeat중심 이미지를 - 당신이 무엇을 물어해야한다.
Pekka

2
@Jean ahh, 나는 지금 스크린 샷에서 본다. 당신은 줄 필요가 의 는 전체 화면을 가로 질러 확장 있도록합니다. 정렬 할 수 있습니다. bodymin-height100%
Pekka

5

이처럼 :

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


3

코드에 오류가 있습니다. 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 : url (../ images / images2.jpg) 중앙 센터 반복 불가;' 문법이 틀리기 때문에 작동하지 않습니다. 그리고 다른 것들도 작동하지 않습니다
X10nD

2

이 시도 background-position: center top;

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


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

html 4.01 'STRICT'doctype을 사용할 때 배경 이미지를 세로로 가운데에 맞추지 않습니다.

첨가:

background-attachment: fixed;

문제를 해결해야합니다

(알렉산더 말이 맞아)


1

간단히 교체

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

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

0

위의 답변에 만족하지 않으면 이것을 사용하십시오

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

0

같은 문제가 있었다. 사용 된 표시 및 여백 속성과 작동했습니다.

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

0
background-position: center center;

없이는 나를 위해 작동하지 않습니다 ...

background-attachment: fixed;

x 및 y 축의 중심 이미지를 모두 사용

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.