Responsive background image in div full width

Question

I m trying to figure out how to make a background-image in a div full width and responsive  The background-image is expanding across the width of the page  and is responsive   but the height of the image isn t its full height  It seems like it s being cut-off somehow  I m using bootstrap framework  and the reason I m trying to do this is I want to overlay some text on the image  I ve tried so many different things but cant seem to figure it out  help     lt div class  bg-image  gt     lt div class  container  gt       lt div class  row-fluid  gt         lt div class  span12  gt           lt h1 gt This is some text lt  h1 gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt       bg-image     background  url img image jpg  no-repeat center top    -webkit-background-size  cover    -moz-background-size  cover    -o-background-size  cover    background-size  cover    max-height  450px

User · Answer

I also tried this style for ionic hybrid app background. this is also having style for background blur effect.

.bg-image {
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}

User · Answer

Here is one way of getting the design that you want   Start with the following HTML    lt div class  container  gt       lt div class  row-fluid  gt           lt div class  span12  gt               lt div class  nav  gt nav area lt  div gt               lt div class  bg-image  gt                   lt img src  http   unplugged ee wp-content uploads 2013 03 frank2 jpg  gt                    lt h1 gt This is centered text  lt  h1 gt               lt  div gt               lt div class  main  gt main area lt  div gt           lt  div gt       lt  div gt   lt  div gt    Note that the background image is now part of the regular flow of the document   Apply the following CSS    bg-image       position  relative     bg-image img       display  block      width  100       max-width  1200px     corresponds to max height of 450px        margin  0 auto     bg-image h1       position  absolute      text-align  center      bottom  0      left  0      right  0      color  white     nav   main       background-color   f6f6f6      text-align  center      How This Works  The image is set an regular flow content with a width of 100   so it will adjust itself responsively to the width of the parent container   However  you want the height to be no more than 450px  which corresponds to the image width of 1200px  so set the maximum width of the image to 1200px   You can keep the image centered by using display  block and margin  0 auto   The text is painted over the image by using absolute positioning   In the simplest case  I stretch the h1 element to be the full width of the parent and use text-align  center to center the text   Use the top or bottom offsets to place the text where it is needed   If your banner images are going to vary in aspect ratio  you will need to adjust the maximum width value for  bg-image img dynamically using jQuery Javascript  but otherwise  this approach has a lot to offer   See demo at  http   jsfiddle net audetwebdesign EGgaN

User · Answer

When you use background-size  cover the background image will automatically be stretched to cover the entire container  Aspect ratio is maintained however  so you will always lose part of the image  unless the aspect ratio of the image and the element it is applied to are identical   I see two ways you could solve this      Do not maintain the aspect ratio of the image by setting background-size  100  100  This will also make the image cover the entire container  but the ratio will not be maintained  Disadvantage is that this distorts your image  and therefore may look very weird  depending on the image  With the image you are using in the fiddle  I think you could get away with it though  You could also calculate and set the height of the element with javascript  based on its width  so it gets the same ratio as the image  This calculation would have to be done on load and on resize  It should be easy enough with a few lines of code  feel free to ask if you want an example   Disadvantage of this method is that your width may become very small  on mobile devices   and therfore the calculated height also  which may cause the content of the container to overflow  This could be solved by changing the size of the content as well or something  but it adds some complexity to the solution

[html] Responsive background image in div full width

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to background-image