Full-screen responsive background image

Question

I am very new to Front-end development and Foundation   I am trying to get  lt div class  main-header  gt  to be a full screen image that scales down responsively    Can anyone tell me what I am doing wrong  It is scaling properly  but is not showing the full image  I also wanted the  lt div class  large-6 large-offset-6 columns  gt  to sit above it on a mobile device     is that possible   The HTML     lt  -- MAIN HEADER -- gt   lt div class  main-header  gt      lt div class  row  gt        lt div class  large-6 large-offset-6 columns  gt          lt h1 class  logo  gt BleepBleeps lt  h1 gt          lt h3 gt A family of little friends lt br gt that make parenting easier lt  h3 gt        lt  div gt   lt  -- END large-6 large-offset-6 columns -- gt      lt  div gt  lt  -- END ROW -- gt   lt  div gt  lt  -- END MAIN-HEADER -- gt    The CSS    main-header       background-image  url    img bb-background2 png       background-repeat  no-repeat      background-position  center      background-size  cover      width  100       height  100      h1 logo       text-indent  -9999px      height 115px      margin-top  10

User · Answer

You can also make full screen banner section without use of JavaScript, pure css based responsive full screen banner section , using height: 100vh; in banner main div, here have live example for this

#bannersection {
    position: relative;
    display: table;
    width: 100%;
    background: rgba(99,214,250,1);
    height: 100vh;
}

https://www.htmllion.com/fullscreen-header-banner-section.html

User · Answer

By useing this code below      classname      background-image  url images paper jpg       background-position  center      background-size  cover      background-repeat  no-repeat      Hope it works  Thanks

User · Answer

This worked for me  so posting this   my-container     position  relative    background   696969    overflow  hidden     my-container before     content         display  block    position  absolute    left  0    top  0    width  100     height  100     z-index  1    opacity  0 6    background-image  url  https   images pexels com photos 1084542 pexels-photo-1084542 jpeg auto compress amp cs tinysrgb amp dpr 2 amp h 750 amp w 1260      background-repeat  no-repeat    background-position  50  0    -ms-background-size  cover    -o-background-size  cover    -moz-background-size  cover    -webkit-background-size  cover    background-size  cover

User · Answer

Simple fullscreen and centered image https   jsfiddle net maestro888 3a9Lrmho   x000D   x000D  jQuery function      x000D      function resizeImage     x000D              img-fullscreen   each function      x000D              var  imgWrp     this   x000D   x000D                 img   this  each function      x000D                  var imgW     this  0  width  x000D                      imgH     this  0  height  x000D   x000D                    this  removeClass    x000D   x000D                   imgWrp css   x000D                      width    window  width    x000D                      height    window  height   x000D                      x000D   x000D                  imgW   imgH  lt    window  width       window  height     x000D                        this  addClass  full-width       this  addClass  full-height    x000D                  x000D              x000D        x000D   x000D      window onload   function      x000D          resizeImage    x000D         x000D   x000D      window onresize   function      x000D          setTimeout resizeImage  300   x000D         x000D    x000D      resizeImage    x000D      x000D     x000D     Hide scrollbars x000D      x000D   x000D   wrapper   x000D      overflow  hidden  x000D    x000D   x000D     x000D     Basic styles x000D      x000D   x000D   img-fullscreen   x000D      position  relative  x000D      overflow  hidden  x000D    x000D   x000D   img-fullscreen img   x000D      vertical-align  middle  x000D      position  absolute  x000D      display  table  x000D      margin  auto  x000D      height  auto  x000D      width  auto  x000D      bottom  -100   x000D      right  -100   x000D      left  -100   x000D      top  -100   x000D    x000D   x000D   img-fullscreen  full-width   x000D      width  100   x000D    x000D   x000D   img-fullscreen  full-height   x000D      height  100   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  wrapper  gt  x000D       lt div class  img-fullscreen  gt  x000D           lt img src  https   static pexels com photos 33688 delicate-arch-night-stars-landscape jpg  alt     gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

for Full-screen responsive background image  set css height   height 100vh    example     main-header       background-image  url    img bb-background2 png       background-repeat  no-repeat      background-position  center      background-size  cover      width  100       height 100vh      responsive height

User · Answer

One hint about the  background-size  cover  solution  you have to put it after  background  definition  otherwise it won t work  for example this won t work   html  body       height  100       background-size  cover      background url  http   i imgur com aZO5Kolb jpg   no-repeat center center fixed      http   jsfiddle net 8XUjP 58

User · Answer

lt style type  text css  gt  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     lt  style gt

User · Answer

I have done this javascript function  it fix your background image to your screen size in base at the most significative dimension  width od height  without change the image aspect ratio    lt script language  Javascript  gt   function FixBackgroundToScreen         bgImg   new Image         bgImg src   document body background       if   bgImg height   window innerHeight   lt   bgImg width   window innerWidth           document body style backgroundSize    auto 100        else         document body style backgroundSize    100  auto           lt  script gt    This function is the only think you need  It must be called with the window onresize event and from the body onload event  The image must be background-repeat  no-repeat  background-attachment  fixed    lt script language  Javascript  gt  window onresize function   FixBackgroundToScreen       lt  script gt    lt body onload  FixBackgroundToScreen     gt    You can see the function in my site www andreamarulla it  Sorry for my english     Andrea  -

User · Answer

For the full-screen responsive background image cover   lt div class  full-screen  gt    lt  div gt   CSS   full-screen      background-image  url  img girl jpg        height  100        background-position  center      background-repeat  no-repeat      background-size  cover

User · Answer

http   css-tricks com perfect-full-page-background-image     HTML  lt img src  images bg jpg  id  bg  alt    gt     CSS  bg     position  fixed     top  0     left  0         Preserve aspet ratio      min-width  100     min-height  100       OR  img bg        Set rules to fill background      min-height  100     min-width  1024px        Set up proportionate scaling      width  100     height  auto        Set up positioning      position  fixed    top  0    left  0      media screen and  max-width  1024px       Specific to this particular image      img bg       left  50       margin-left  -512px       50             OR    HTML  lt img src  images bg jpg  id  bg  alt    gt     CSS  bg   position  fixed  top  0  left  0     bgwidth   width  100      bgheight   height  100        jQuery   window  load function                  var theWindow            window                bg                    bg                aspectRatio         bg width      bg height             function resizeBg                      if    theWindow width     theWindow height     lt  aspectRatio                          bg                          removeClass                            addClass  bgheight                      else                        bg                          removeClass                            addClass  bgwidth                                          theWindow resize resizeBg  trigger  resize

User · Answer

Backstretch  Check out this one-liner plugin that scales a background image responsively   All you need to do is   1  Include the library    lt script type  text javascript  src  http   cdnjs cloudflare com ajax libs jquery-backstretch 2 0 4 jquery backstretch min js  gt  lt  script gt    2  Call the method     backstretch  http   dl dropbox com u 515046 www garfield-interior jpg      I used it for a simple  under construction website  site I had and it worked perfectly

User · Answer

I personally dont recommend to apply style on HTML tag  it might have after effects somewhere later part of the development    so i personally suggest to apply background-image property to the body tag   body      width 100       height  100       background-image  url    images bg jpg        background-position  center      background-size  100  100       background-repeat  no-repeat      This simple trick solved my problem  this works for most of the screens larger smaller ones    there are so many ways to do it  i found this the simpler with minimum after effects

User · Answer

I would say  in your layout file give a    lt div id  background  gt  lt  div gt    and then in your css do    background    position  fixed    top  50     left  50     min-width  100     min-height  100     width  auto    height  auto    z-index  -100    -webkit-transform  translateX -50   translateY -50      transform  translateX -50   translateY -50      background  image-url  background png   no-repeat    background-size  cover      And be sure to have the background image in your app assets images and also change the   background  image-url  background png   no-repeat     background png  to your own background pic

User · Answer

I had this same problem with my pre-launch site EnGrip  I went live with this issue  But after a few trials finally this has worked for me   background-size  cover  background-repeat  no-repeat  position  fixed  background-attachment  scroll  background-position  50  50   top  0  right  0  bottom  0  left  0  content      z-index  0    pure CSS solution  I don t have any JS JQuery fix over here  Even am new to this UI development  Just thought I would share a working solution since I read this thread yesterday

User · Answer

Try this    lt img src  images background jpg    style  width 100  height 100  position absolute top 0 left 0 z-index -5000   gt    http   thewebthought blogspot com 2010 10 css-making-background-image-fit-any html

[css] Full-screen responsive background image

Examples related to css

Examples related to responsive-design

Examples related to fullscreen

Examples related to zurb-foundation