배경 이미지가 div 자체보다 클 수 있습니까?

배경 이미지가 div 자체보다 클 수 있습니까?

---

너비가 100 % 인 바닥 글 div가 있습니다. 콘텐츠에 따라 높이가 약 50px입니다.

#footer 에이 div를 오버플로하는 배경 이미지를 제공 할 수 있습니까?

이미지는 약 800x600 픽셀이며 바닥 글의 왼쪽 하단 모서리에 배치하고 싶습니다. 내 웹 사이트의 배경 이미지처럼 작동해야하지만 이미 내 몸에 배경 이미지를 설정했습니다. 내 웹 사이트의 왼쪽 하단에 다른 이미지가 필요하며 #footer div가 적합합니다.

#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}

이미지는 바닥 글로 설정되지만 div를 넘치지 않습니다. 그렇게 할 수 있습니까?

overflow:visible 일을하지 않는다!

---

나는 당신이 배경 이미지를 div 오버플로 만들 수 있다고 믿지 않습니다. 이미지 태그에 배치 된 이미지는 상위 div를 오버플로 할 수 있지만 배경 이미지는 배경이되는 div에 의해 제한됩니다.

---

아주 쉬운 트릭이 있습니다. 해당 div의 패딩을 양수로 설정하고 여백을 음수로 설정합니다.

#wrapper {
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;
}

---

이 기사에 표시된대로 css3 의사 요소를 사용할 수 있습니다.

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

---

아니, 할 수 없습니다.

그러나 확실한 해결 방법으로 첫 번째 div를로 분류하고 이미지를 포함하는 기본 요소를 만드는 데 position:relative사용 하는 것이 좋습니다 div::before. position:absolute초기 div를 기준으로 어디로 든 이동할 수 있으므로 분류됩니다 .

새 요소에 콘텐츠를 추가하는 것을 잊지 마십시오. 다음은 몇 가지 예입니다.

div {
  position: relative;
}    

div::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...
}

참고 : 상위 div의 '상단'에 배치하려면 div::after대신 사용하십시오.

---

에 이미 배경 이미지가 있다고 언급하셨습니다 body.

당신은 수 에 그 배경 이미지를 설정 html하고에 새 body. 물론 레이아웃에 따라 다르지만 바닥 글을 사용할 필요는 없습니다.

---

배경 크기의 표지를 사용하는 것이 효과적이었습니다.

#footer {
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
}

분명히 지원 문제를 인식하고 Can I Use : http://caniuse.com/#search=background-size를 확인하십시오.

---

사실은 아닙니다. 배경 이미지는 적용되는 요소에 의해 제한되며 오버플로 속성은 요소 내의 콘텐츠 (즉, 마크 업)에만 적용됩니다.

바닥 글 div에 다른 div를 추가하고 여기에 배경 이미지를 적용하고 대신 오버플로를 가질 수 있습니다.

---

This could help. It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-index so it stays "below" everything, and a negative top value of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.

---

Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url('image.svg');
    }
}

참고URL : https://stackoverflow.com/questions/4280886/can-a-background-image-be-larger-than-the-div-itself