Develop Reference

How to achieve this scrolling effect in Bootstrap?

How do I achieve this scrolling effect in Boostrap? Have a fixed image background with the content div overlayed on top when scrolling:
http://www.standardhotels.com/culture/things-to-do-july-2017-new-york-los-angeles-miami

There are several ways you could achieve this. You could fix a background image to html and offset the body, adding padding to keep text in the viewport. For example:
html {
background: url(DESIRED BACKGROUND IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:lightblue;
padding-left:150px;
padding-right: 30px;
position:relative;
left:-150px;
top:80%;
}
Check out this basic (but very cute) kitten example.
EDIT
Looking further into your example's code, you could also add margin-top to the body and remove the positioning top. Your example shows margin-top: calc(100vh - 140px) !important;
Here's an updated version of my fiddle with the properties swapped. You can see that the effect is very similar.

You are looking for Parallax scrolling. Here is the link with working demo on how to achieve this.

Mobile - body:before background image briefly breaks when scrolling

When I scroll on my website there is a white bar at the bottom of my background image. The image is attached to body:before {}. I have tried a variation of CSS settings and tricks to circumvent this but I can't seem to get around it. I even tried having the image overflow 110vh to prevent the white-space but that also failed.
Example of the issue below. Perhaps this is strictly iOS related? I am using iOS 10 and I have tried both Chrome and Safari and the issue persists on both.
Here is my website:
Here is my CSS:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
min-width: 100vw;
min-height: 110vh;
z-index: -10;
background: url(../css/images/brotherhoodSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any suggestions for this one? I've already had to use this crazy body:before workaround because background-attachment:fixed doesn't work well on iOS mobile devices.
Thanks

Setting background size (of image) for a "scrolling" page

So i'm having the trouble that if I have a "long" webpage (where you make your window as big as you can but still need to scroll) the image doesn't "behave" correctly.
I thought that setting the background-size property to cover would do this but is the image isn't big enough (Which would have to be pretty big) I just get white space once I scroll down the page a little bit. Is there a property that would, say, set the height of the background to 100% then properly scale the image so it has the correct width proportional to the original height?
My solution as of now is having a background color that the image "eases" into, just to make it look smooth.

Try to use
html,body {
background: url(yourImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or if image isn't big enough, use a background color as well`
background: #6DB3F2 url('yourImg.jpg');

Try using background-size: 100% 100%; property.
But that will stretch your image.
If you want to add background to the full webpage then you can add background-image:(''); property to body.
e.g.
body{
background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
background-repeat:none;
background-size: 100% 100%;
}

How can I stop background from moving when zooming out?

When the browser is at 100% the back images are great. Even at 50% zoom out they're still okay. but as you continue to zoom out all the way to 25% the background image position collapses or "hides" and I'd like the images' background-position: center top to remain intact no matter minimize or maximize.
I've attached an example:
http://i65.tinypic.com/k1e54z.jpg
You can also visit www.medshopandbeyond.com and zoom out in your browser to see what's happening. [BTW: I am aware of the grammatical errors in the pics :) ]
The only one that gets close enough to what I want is background-size:contain
however the image is no longer full width from screen to screen if setting it to this
#header-image4 {
background-image:url("{{ 'old-friends-555527_19201.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -50px;
background-size: cover;
width: 100%;
margin-top: -10px;
}
<div id="header-image4"></div>

This is because you are using background: cover and a fixed height. As you zoom out your height remains the same but the width increases and background: cover will expand to fill that width which is why you are getting an unusual crop. The same issue can be seen if you pull out the width of the browser window on a large monitor.
Personally, I'd create a different height for the div at different breakpoints e.g.
#media screen and (max-width: 1920px){
#header-image4{height: 1000px}
}
#media screen and (max-width: 2560px){
#header-image4{height: 1500px}
}

Background image in HTML

Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.

The proper solution to keep the ratio to your image is to set background-size: cover.

If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.

Use background-size:cover; will help you.

Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here

You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}

The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}