How to use responsive background image in css3 in bootstrap

Question

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  important  margin 0    On 100  zoom this is OK  but when I zoom in at 180  approx  the image will be short from top and bottom  I want some css tricks

User · Answer

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

User · Answer

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   lt div class  container-fluid full  gt     lt  div gt    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

User · Answer

Try this   body     background-image url img background jpg     background-repeat  no-repeat    min-height  679px    background-size  cover

User · Answer

Set Responsive and User friendly  Background    lt style gt  body   background  url image jpg   background-size 100   background-repeat  no-repeat  width  100      lt  style gt

User · Answer

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

User · Answer

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

User · Answer

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

[html] How to use responsive background image in css3 in bootstrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to background-image