Twitter Bootstrap Responsive Background-Image inside Div

Question

How i can modify  bg image so it would be responsive  resizable and proportional in all browser   HTML     lt div class  container  gt          lt div class  row  gt             lt div class  col-md-2  gt  lt  div gt                lt div class  col-md-8 col-sm-6 col-xs-12 well  id  bg  gt                   lt  div gt                lt div class  col-md-2  gt  lt  div gt          lt  div gt     lt  div gt    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

User · Answer

I had the similar issue and i solved it using:

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.

User · Answer

Mby bootstrap img-responsive class is you looking for

User · Answer

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

User · Answer

I found a solution   background-size 100  auto

User · Answer

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

User · Answer

Try this  apply to a class you image is in  not img itself   e g    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

User · Answer

You might also try   background-size  cover    There are some good articles to read about using this CSS3 property  Perfect Full Page Background Image by CSS-Tricks and CSS Background-Size by David Walsh   PLEASE NOTE - This will not work with IE8-  However  it will work on most versions of Chrome  Firefox and Safari

User · Answer

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

User · Answer

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

[html] Twitter Bootstrap Responsive Background-Image inside Div

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3