How To Use Responsive Background Image In Css3 In Bootstrap

I dont want to use html tag. This is my css. I am using bootstrap 3.0. background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0

Solution 1:

For full image background, check this:

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Solution 2:

You need to use background-size: 100% 100%;

Demo

Demo 2 (Won't stretch, this is what you are doing)

Explanation: You need to use 100% 100% as it sets for X AS WELL AS Y, you are setting 100% just for the X parameter, thus the background doesn't stretch vertically.

---

Still, the image will stretch out, it won't be responsive, if you want to stretch the background proportionately, you can look for background-size: cover; but IE will create trouble for you here as it's CSS3 property, but yes, you can use CSS3 Pie as a polyfill. Also, using cover will crop your image.

Solution 3:

I found this:

Full

An easy to use, full page image background template for Bootstrap 3 websites

http://startbootstrap.com/template-overviews/full/

or

using in your main div container:

html

<divclass="container-fluid full"></div>

css:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}

Solution 4:

Check this out,

body {
    background-color: black;
    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;
}

Solution 5:

The file path 'images/ip-box.png' implies that the css file is at the same level as the images folder.

It's probably more common to have 'images' and 'css' folders at the same level as the 'index.html' file.

If that were the case and the css file were one level down in its respective folder, then the path to ip-box.jpg as specified in the css file would be: '../images/ip-box.png'