We Keep Coding

Create a Javascript Gallery with Background Images

Need help creating a full page gallery. I tried various options. I'm trying to create full page gallery that lets the user scroll vertically though 1 image at a time.
Here's my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm stuck on the javascript/jquery solution to detect if the user has scrolled. I want to change images if the user scrolls up 10 pixels or down 10 pixels.
Here's an example of what I'm trying achieve:
http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/

It would be better to use js libs like "fullPage.js, smart scroll, pagePiling.js" those help you to make a perfect page or gallery scroll like what you wanted to achieve, for more information follows below links:
https://alvarotrigo.com/fullPage/
http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
https://alvarotrigo.com/pagePiling/

style.background - fit to screen (esp. on mobile) - JS, HTML, CSS

This is my CSS
<style>
body {
background: url(30.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
This makes the background image fit to screen.
Now, if I attempt to make the background image dynamic using JS as follows, the background image no longer fits to screen.
<style>
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
And JS
body.style.background = 'url(30.gif) no-repeat center center fixed';
This makes the image appear to the original size. I want the image to be fit to screen.
I tried the following but to no avail:
body.style.background = 'url(30.gif) no-repeat center center fixed width:100% height:100%';
How do I correct the error?

Your JS is overwriting your CSS. You need to include background-size in your JS, like this (assuming you've stored document.body in a variable named body as indicated):
body.style.background = 'url(30.gif) center center/cover fixed no-repeat';
Alternatively, try setting all properties separately in CSS, and make sure the body always fills the viewport, like this:
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat:
min-height: 100vh;
}
Then if you need to set the background-image dynamically, do it like so:
body.style.backgroundImage = 'url(30.gif)';
You may need to do it like this because setting the background shorthand property will override individual properties, breaking your vendor-prefixed background-sizing.

Replace(fade) body backgrounds without effecting nested elements

On click background is changed to image or color. To do it, for start I made two classes for body:
body.bg-color {
background-color:red;
}
body.bg-img {
background: url(../images/bg.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then using .addClass and .removeClass I change backgrounds. Thing is that this method fades, in addition to background, also content. What should be done to fade in/out only background?
$(document).ready(function(){
$('body').addClass('bg-color');
$('.element,#content1,#content2').hide();
$("#link1").click(function(){
$('#wrapper').hide();
$('body').removeClass('bg-color').fadeOut();
$('body').addClass('bg-img').fadeIn();
});
$("#link2").click(function(){
$('#wrapper').show();
$('body').removeClass('bg-img').fadeOut();
$('body').addClass('bg-color').fadeIn();
});
});

Instead of applying this all to the body tag, use an fixed positioned <div> with height and width of 100%, and give that the background color so you can just fade out that element instead of the entire .
Also, you can just toggle one class instead of adding and removing two classes at once.
Eg.
#bg{
position: fixed;
height: 100%;
width: 100%;
z-index: 1;
background: red;
}
#bg.bg-img {
background: url(../images/bg.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Just put the following right after the opening body tag:
<div id="bg"></div>
Here is your updated JS:
$(document).ready(function(){
$('.element,#content1,#content2').hide();
$("#link1").click(function(){
$('#wrapper').hide();
$('#bg').fadeOut().addClass('bg-img').fadeIn();
});
$("#link2").click(function(){
$('#wrapper').show();
$('#bg').fadeOut().removeClass('bg-img').fadeIn();
});
});

How To Make Full Page Background Image Without Resizing Or Cropping

What I need is what the following site does exactly but it's not a slideshow it's just a fading background image :
http://www.stevenharrisarchitects.com/
The image is 100% in width and 100% in height so no Cropping occurs, and this is what I want exactly.I had managed to do this part very easily with the following codes :
#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}
I made the background-size : 100% 100% ;
It works fine, but the only problem that's left is that my client doesn't want the image to resize with the size of the window, instead it should act like on the site I mentioned above (Try resizing the window and you will see what I mean).
I don't want my background image to re-size to the 100% of width and height of my window, I want it to act just like in the above link I shared.
Also a link to my site :
http://leydenlewis.com/
Any help would be much appreciated.

If you need to use the background property and never want the image to be cropped, you should use background-size :contain;
div.big_background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url('http://placekitten.com/g/1200/800') no-repeat center top;
background-size :contain;
}

Answer based on problem described above:
#bg-stat {
width: 100%;
height: 100%;
background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
Answer based on feedback:
CSS:
#bg-stat {
width: 100%;
height: 100%;
}
#bg-image {
background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
height: 100%;
width: 100%
min-width: 1140px; // Based on img dimensions or arbitrary
max-height: 735px; // Based on img dimensions or arbitrary
}

i think you need below code:
body
{
background: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
}

How can I stretch content background image to full screen?

I have this HTML. With the following:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Background image to this content CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
This structure is working ok. But I want to attach this background images to body and full screen size. How can I do this via JavaScript or pure jQuery (no plugin)?

Try below code...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Use this CSS:
background-size: cover;

Do you mean an image that is related to the context of the body and not of .item?
You can use position:fixed for that. A top, left, bottom and right will ensure it will take the whole page.
background-size: cover will make sure the image itself will cover the page. Depending on the image you use, you might want another solution. Ex: you can center an image and fade to a background color (but that's up to you)
Use a z-Index of -1 to ensure it does not obscure your content
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Fiddle: http://jsfiddle.net/Aa8fe/

Even i struggled for the same and atlast i got a solution..its below..
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}