We Keep Coding

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.

Making an image slider but the background image won't respond to other properties?

i recently just got some help with this code but and it works as a slider of background images, the only issue is that the background image isn't responding to the background image size property in the css and now the images are zoomed in fully when i want them to cover the div.
Here is what it looks like:
So here is my HTML
<div id="headbar" onload="photoA()">
<div class="headbar-title">THE ALL NEW 14 RANGE</div>
<div class="button">FIND OUT MORE</div>
<script type="text/javascript">
var imageCount = 1;
var total = 6;
window.setInterval(function photoA() {
var headbar = document.getElementById('headbar');
imageCount = imageCount + 1;
if(imageCount > total){imageCount = 1;}
headbar.style.background = "url('../img/img"+ imageCount +".JPG') no-repeat center center";
}
,1000);
</script>
</div>
Here is my css
#headbar {
height: 50vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 60px;
display: flex;
-webkit-flex-flow: column wrap;
justify-content: center;
align-items: center;
color: #eee;
}
Any help will be massively appreciated!
Thanks,
Ollie

Your javascript code that is setting the background is overwriting the background-size property in your css.
<script type="text/javascript">
var imageCount = 1;
var total = 6;
window.setInterval(function photoA() {
var headbar = document.getElementById('headbar');
imageCount = imageCount + 1;
if(imageCount > total){imageCount = 1;}
headbar.style.backgroundImage = "url('../img/img"+ imageCount +".JPG')";
}
,1000);
</script>
#headbar {
height: 50vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
margin-top: 60px;
display: flex;
-webkit-flex-flow: column wrap;
justify-content: center;
align-items: center;
color: #eee;
}
This should fix the problem. I deleted the background-position property, since this has no function and moved the background-repeat to the CSS. Only the background-image gets set from the code.
Remember that JavaScript code always takes precedence over your CSS rules except when you use the !important flag on a css property.

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();
});
});

Parallax scroll effect with video

I'm learning about the parallax effects and I'm trying to display a video in background instead of an image.
So, I created a good effect using a background image.
This is my jQuery code:
$('[data-parallax]').each(function(){
var $this = $(this),
$window = $(window);
$window.scroll(function() {
var y = -($window.scrollTop() / $this.data('speed')),
background = '50% '+ y + 'px';
$this.css('background-position', background);
});
});
And my CSS:
[data-parallax] {
background-attachment: fixed;
background-color: #fff;
background-image: url('http://lorempixel.com/720/480');
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
position: relative;
}
Example: http://jsfiddle.net/7a2ky/show/
Code: http://jsfiddle.net/7a2ky/
I'd like to do the same effect but using a video (http://goo.gl/HcH2cL) instead of an image. Is it possible?

You cant change a background image into a video in CSS,
you need to trick the browser with the zIndex (or use a gif file instead of the video) :
$video.css({"height":"100%",
position:'absolute',
top:0,left:0,zIndex:10
});
http://jsfiddle.net/camus/7a2ky/9/show/

js
$(window).scroll(function ()
{
var yPos=-($(window).scrollTop() / 6);
if($(window).scrollTop()>100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
}
if($(window).scrollTop()<100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
}
});
css
#div1_wrapper
{
background:url("images/parallax1.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
#div2_wrapper
{
background:url("images/parallax2.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
if you need to view complete tutorial with demo http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php

How to Fade in AFTER the Page has Loaded: Javascript

I am using a fade effect script to fade in my home page, but ideally, I'd like to start the fade once the background image has been loaded.
How could I incorporate this into my existing javascript?
UPDATED Script:
<script type="text/javascript">
$(window).load(function() {
if (window.localStorage && !localStorage['faded']) {
localStorage['faded'] = true;
$('body').hide().fadeIn(500);
}
});
</script>
CSS:
html {
background: #000;
height: 100%;
}
body {
background: black url(images/bg.jpg) no-repeat 200px center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
height: 100%;
}

Use $(window).load instead of $(document).ready - the difference is that the latter will run after all your assets are loaded including images.