Develop Reference

Fallback Backgrounds when Image is missing

I want to have a fallback Background only if the Image that is supposed to be the Background is missing.
This is what I got:
background: url(\'img/items/image.png\') , url(\'img/items/fallback.png\')
But in this case both backgrounds are shown at the same time.
Don´t know why.

As you can notice from the comments under your post, there is no such thing as a fallback but you always can find a way to solve the problem. Also keep in mind that sometimes when you come up with an unusual solution there is always be a price: performance, readability, etc.
For your situation I can suggest some ideas how you can solve that:
Use two images (those mustn't be transparent)
background-image: url("defaultImage.png"), url("backupImage.png"); background-position: 0 0, 0 0; background-repeat: no-repeat, no-repeat;
Use two nested HTML elements, for instance. Styling them and add background-image for both.
In css add pseudo elements through :before{content:" "; background:url(backup.png); display: block; position:absolute;}

Can't get image to fit background of body element

I'm currently sitting here trying to write a decent looking login page for my xfce setup.
I'm wanting the profile picture and background image to change when someone inputs the wrong password. I currently got it working to the point where it changes the background but it doesn't stretch it to fit my screen as I need the javascript to run background-size: cover;.
My current javascript line is currently document.body.style.background = " #000000 url('images/bg.gif') no-repeat center fixed"; JQuery is not an option, don't ask why. It just isn't.
Please and thank you.

You can use document.body.style.backgroundSize = "cover" to force the background to "fill the screen", as you say.

It's recommended (much easier and maintainable) to use CSS classes to style your page and to use JS to switch classes.
So, in your case, JavaScript can be something like:
document.body.className = 'wrong-password';
and CSS would be:
<style>
.wrong-password {
background: #000000 url('images/bg.gif') no-repeat center fixed;
background-size: cover;
}
</style>
And you can easily add more styles, or even change children's style (e.g. avatar) easily, like so:
<style>
.wrong-password .avatar {
display: none;
}
.wrong-password .some-placeholder {
display: block;
}
</style>

how to center a random background in a javascript

I've looked on stackoverflow for a background js. After trying some I found what I thought was exactly what I need:
<script type="text/javascript">
ChangeIt();
</script>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
document.body.style.repeat = "contain";// Background repeat
}
</script>
However, the backgrounds don't center, you just see 'em on the top left corner. So I googled on the net but... well idk anything about js, just a little few things. I'm helping a friend with his website and we're stuck on this. I'm just hoping someone with more knowledge than us can help by giving a look.
EDIT : Here's what i mean by "center" : http://i.imgur.com/G3Z9epT.png

Here's a fiddle that uses css instead of js for this, also I've added a background-size on body so the entire image is visible on all screen sizes, this is optional however - http://jsfiddle.net/dk329q1L/
Here's the css -
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Entire background image always stays in view */
}

you could achive this by doing this also:
background-position: center;

To center the background add:
document.body.style.backgroundPosition = "center";

you have to set margin auto in this case ,but you have to specify width
you have to assign id :
{
width:100px;
} margin: auto;

You should set the background-position for your element, add this line to your code:
document.body.style.backgroundPosition = "center top";
The value center top means that the image will be placed center in horizontal, and will be placed at top in vertical.
jsFiddle Demo.
The below image shows other values you can use for background-position:

How can I force the download of unused CSS images?

This is kind of a continuation of a QUESTION I ASKED YESTERDAY and an off-shoot of THIS QUESTION.
Basically, I am using jquery to change css background images on page scroll, however on first visit, when the background changes on scroll it only starts loading then and there making for a poor user experience.
I am using cache headers so that this only happens once, but still it would be nice if it didn't happen at all.
How can I load the second CSS image before the page scrolls to make the transition seamless?
I am only trying to load this one image in the background, not preload all images on the page before display or anything...
Current code I am using...
jquery
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
css
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
DEMO - Scroll to see in action.

Few options here:
Add a hidden element and add your image as a background; the browser will load it and is smart enough to know that it doesn't need to reload
What I would consider the cleaner way: load your second image behind the first one:
html {
background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

On the left side add all your images and make all of them positioned absolutely
img{
position :absolute;
z-index:1;
}
So all images will be loaded on windows load. And just change their z-index according to scroll.

One more option is there is to make ur images in a single sprite and display them by changing position..in this way u will save 1 extra http call itself. U can create image sprite with http://spritegen.website-performance.org/

CSS: Making Background Image fade slowly

I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.
I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.
The sample CSS code that I have is:
.acceptValue {
background-image: url('../../images/accept.gif');
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
}
I want the above CSS property to be applied for 'n' seconds and then it should disappear.
Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.
Please let me know.