트위터 부트 스트랩 반응 형 배경 이미지-Div 내부

트위터 부트 스트랩 반응 형 배경 이미지-Div 내부

---

#bg모든 브라우저에서 반응하고 크기를 조정하고 비례 하도록 이미지 를 수정하려면 어떻게 해야합니까?

HTML :

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

css :

@import url('bootstrap.min.css');

body{
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}

---

해결책을 찾았습니다.

background-size:100% auto;

---

다음을 시도해 볼 수도 있습니다.

background-size: cover;

이 CSS3 속성을 사용하는 방법에 대해 읽어야 할 몇 가지 좋은 기사가 있습니다 : P erfect Full Page Background Image by CSS-Tricks 및 CSS Background-Size by David Walsh .

참고-IE8-에서는 작동하지 않습니다. 그러나 대부분의 Chrome, Firefox 및 Safari 버전에서 작동합니다.

---

이것을 시도하십시오 (이미지 자체가 아닌 클래스에 적용하십시오).

.myimage {
  background: transparent url("yourimage.png") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 500px;
}

---

비슷한 문제가 있었고 다음을 사용하여 해결했습니다.

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

... here i had to add the padding: 50% because it wasn't working for me otherwise. It allowed me to set the height of container, as per the size ratio of my banner image. and it is also responsive in my case.

---

I believe this should also do the job too:

background-size: contain;

It specifies that the image should be resized to fit within the element without losing it's aspect ratio.

---

The way to do this is by using background-size so in your case:

background-size: 50% 50%;

or

You can set the width and the height of the elements to percentages as well

---

This should work

background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;

---

Don't use fixed:

.myimage {
   background:url(admin-user-bg.png) no-repeat top center;
   background: transparent url("yourimage.png") no-repeat top center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
   height: 500px;
}

---

Mby bootstrap img-responsive class is you looking for.

참고URL : https://stackoverflow.com/questions/19055811/twitter-bootstrap-responsive-background-image-inside-div