CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
vkatsitadze
vkatsitadze

Reputation: 1525

Twitter Bootstrap Responsive Background-Image inside Div

How i can modify #bg image so it would be responsive, resizable and proportional in all browser?

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

Upvotes: 58

Views: 214011

Answers (9)

Dzintars
Dzintars

Reputation: 1571

Mby bootstrap img-responsive class is you looking for.

Upvotes: 1

RayKech
RayKech

Reputation: 11

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

Upvotes: 1

KevinAdu
KevinAdu

Reputation: 129

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.

Upvotes: 6

Jowita Emberton
Jowita Emberton

Reputation: 166

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

Upvotes: 7

Mashhood
Mashhood

Reputation: 403

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.

Upvotes: 6

Jay
Jay

Reputation: 782

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;

Upvotes: 1

vkatsitadze
vkatsitadze

Reputation: 1525

I found a solution.

background-size:100% auto;

Upvotes: 80

doodelicious
doodelicious

Reputation: 642

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.

Upvotes: 23

Hive7
Hive7

Reputation: 3675

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

Upvotes: 1

Related Questions