Full-Screen Responsive Background Image

Full-screen responsive background image

http://css-tricks.com/perfect-full-page-background-image/

//HTML
<img src="images/bg.jpg" id="bg" alt="Sample Image">

//CSS
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

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% */
  }
}

//HTML
<img src="images/bg.jpg" id="bg" alt="Sample Image">

//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()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }

        }

        theWindow.resize(resizeBg).trigger("resize");

});

Fullscreen responsive background image in CSS

jsBin demo

background: url(image.jpg) fixed 50%;
background-size: cover;                 /* PS: Use separately here cause of Safari bug */

^{The fixed (background-attachment) is optional.}

The above is just a shorthand for:

background-image      : url(image.jpg);
background-attachment : fixed;
background-position   : 50% 50%;     /* or: center center */
background-size       : cover;       /* CSS3 */

You've could in all modern browsers but Safari use:

background: url(image.jpg) fixed 50% / cover;

where the / is used in background shorthand to separate and distinguish position from size (cause position accepts both single and multiple (X,Y) values), but Safari has a bug with this / shorthand so use as described above.

Responsive Background Image - Fullscreen

Did you tried this :

body {
  margin:0;
  padding:0;
  background: url('/images/bg.jpeg') no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

Full screen responsive background - then normal

From what I understand you are looking for something like this:

body {  background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);  background-position: center center;  background-repeat: no-repeat;  background-attachment: fixed;  background-size: cover;  margin:0}.content {  position: absolute;  bottom: -100px;  width: 100%;  background: #FF6969;  height: 100px;}.moreContent {  position: absolute;  height: 100px;  bottom: -200px;  width: 100%;  background: white;}

<body>  <div class="content">    Hello this is my content    <br/>    <br/>    <br/>    <br/>Lots of content  </div>
  <div class="moreContent">    more content...  </div>
</body>

full screen responsive background image with bootstrap

Two options

use img-responsive class if you are using tag.

<div class="wrapper">
   <img src="pic_1.jpg" class="img-responsive" alt="Responsive image">
</div>

if you are using css use this.

.wrapper{background: url('/assets/64531/green_suburb.jpg') no-repeat   center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

How to maintain responsive background image height while changing screen width?

You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.

You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.

Here's an example using your CSS settings (except see caveat below):

* {
  margin: 0;
  padding: 0;
}

html {
  --imgw: 1391;
  --imgh: 2471;
  width: 100vw;
  min-height: calc(100vw * var(--imgh) / var(--imgw));
  /* make sure the whole height of the image is always shown */
  background-image: url(https://picsum.photos/id/1015/1391/2471);
  background-size: cover;
}

HELLO