div 내에서 (배경) 이미지를 가운데에 배치하는 방법은 무엇입니까?


136

div에서 배경 이미지를 중앙에 배치 할 수 있습니까? 나는 모든 것에 대해 시도했지만 성공하지 못했습니다.

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

이게 가능해?

답변:


279
#doit {
    background: url(url) no-repeat center;
}

25
감사. 센터링을위한 특정 CSS는 "background-position : center;"입니다.
pmont

@Green : 스프라이트 배경 이미지에 대한 내 답변을 참조하십시오.
Clayton

3
전체 div가 이미지로 채워지고 추가 공간이 필요하지 않은 background-size: cover; 경우 사용해야 합니다. 이미지의 일부가 잘 background-size: contain;
리거나 늘어나지

80

시험 background-position:center;

편집 : 이 질문은 많은 견해를 얻고 있기 때문에 추가 정보를 추가 할 가치가 있습니다.

text-align: center 배경 이미지가 문서의 일부가 아니므로 흐름의 일부가 아니기 때문에 작동하지 않습니다.

background-position:center약칭 background-position: center center; ( background-position: horizontal vertical);


실제로 당신은 필요합니다background-position:center;
Dave Sag

선택한 답변은 어떤 이유로 든 전체 배경이 사라지게합니다 (공평하게 말하면 jquery 일을하고 있습니까?).이 답변은 효과가 있습니다. 공감.
bwoogie

15

배경 위치 사용 :

background-position: 50% 50%;

1
이미지가 가로 중앙에 세로 상단에 필요한 경우에 유용합니다 : background-position : 50 % 0 %;
Sébastien Gicquel

CSS는 값이 0 일 때 어떤 단위도 필요하지 않습니다
Capsule

8

배경 이미지의 중앙 또는 위치를 지정하려면 background-positionproperty 를 사용해야 합니다. background-position 속성 은 요소의 측면 topleft측면 에서 배경 이미지의 시작 위치를 설정합니다 . CSS 구문은 background-position : xvalue yvalue;입니다.

"xvalue"및 "yvalue"지원되는 값은 길이 단위와 px같고 왼쪽 및 오른쪽과 같은 백분율 및 방향 이름입니다.

"xvalue"는 배경의 가로 위치이며 요소의 맨 위에서 시작합니다. 그것은 당신이 50px그것을 사용 하면 요소의 상단에서 "50px"떨어진 것을 의미합니다 . "yvalue"는 같은 조건을 가진 수직 위치입니다.

따라서 background-position: center;배경 이미지 를 사용하면 중앙에 배치됩니다.

그러나 나는 항상이 코드를 사용합니다 :

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

나는 그것이 너무 혼란 스럽지만 다음을 의미합니다.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

그리고 나는 또한 background-size새로운 속성이며 압축 된 코드에서 무엇인지 /cover알지만이 코드는 fillWindows 데스크톱 배경에서 배경 크기와 위치를 의미 합니다.

당신은에 대한 자세한 내용을 볼 수 background-position있는 여기background-size있는 이곳 .


7

배경 이미지가 세로로 정렬 된 스프라이트 시트 인 경우 다음과 같이 각 스프라이트를 가로로 가운데에 맞출 수 있습니다.

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

배경 이미지가 가로로 정렬 된 스프라이트 시트 인 경우 다음과 같이 각 스프라이트를 세로로 가운데에 맞출 수 있습니다.

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

스프라이트 시트가 콤팩트하거나 앞서 언급 한 시나리오 중 하나에서 배경 이미지를 중앙에 배치하려고하지 않는 경우 이러한 솔루션이 적용되지 않습니다.


5

이것은 나를 위해 작동합니다 :

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

3

이것은 나를 위해 작동합니다 :

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

1
margin: 0 auto;여기서 autodiv 내에서 가로로 가운데에 배치됩니다. 감사합니다!
oyalhi

1

이것은 나를 위해 작동합니다 :

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        

0

이것은 이미지를 div의 중심에 정렬하는 데 효과적입니다.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.