I am using bootstrap and am trying to make my background images responsive, but its just not working! Here is my code...
html
<div class="row">
<div class="bg">
<img src="../img/home_bg.jpg" alt="home background image">
</div><!-- /.bg -->
</div><!-- /.row -->
css
.bg {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Please help me! Thank you!
You need to read up a bit more about the difference between background images and inline images. You cannot style an img tag as a background, it is a block level element, and flows with the document. A background image is a property of an element. Since you want this image to be the background of the whole page, you can apply the background image to the html or body elements.
http://jsfiddle.net/8L9Ty/3/
body {
background: url('http://placekitten.com/900/900');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am trying from so long, and finally I found that in bootstrap 3.3.5 you have to use the height and width property to set the background.
I used the following code:
.header{
background-image: url(images/header.png);
height: 500px;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Since you don't mention background image for your "DIV" tag. I assume you want to apply background image for your whole page. Is this what you looking for ?
Stylesheet
body {
background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
}
HTML Part
<body>
<div class="row">
<div class="bg">
</div><!-- /.bg -->
</div><!-- /.row -->
</body>
http://jsfiddle.net/AziziMusa/8L9Ty/5/
remove the img tag <img src="../img/home_bg.jpg" alt="home background image"> and do it with css as below :
html
<div class="row">
<div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->
css
.bg {
background-image: url('../img/home_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
