Change Website Background(image) whit Section

Question

I'm Programming a Website and want that it changes it Backgroundimage when i reached a div Box i found it like i have to do it when i want to change the color of it (the Background) but not how it goes with Images, kinda like this

http://www.formuswithlove.se/

but just with Images

here is the code how to do it with colors if its help for someone

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    margin:0;
    padding:0;
    background:white;
}
div{
    width:100%;
    height:1600px;
}
</style>
<script type="text/javascript">
var section = {
    sections: [
        'section1',
        'section2',
        'section3'
    ],

    sectionOffset: {},

    sectionBackground: {
        'section1': 'rgb(0, 0, 0)',
        'section2': 'rgb(132, 132, 132)',
        'section3': 'rgb(255, 255, 255)'
    },

    currentSection: null
}

window.onload = function()
{
    var looplen = section.sections.length;

    for(var i = 0; i < looplen; ++i)
    {
        section.sectionOffset[section.sections[i]] = document.getElementById(section.sections[i]).offsetTop;
    }

    setTimeout("initialBackgroundChange()", 50);
}

window.onscroll = function()
{
    tryBackgroundChange();
};

function tryBackgroundChange()
{
    var looplen = section.sections.length,
        match,
        backgroundColor;

    for(var i = 0; i < looplen; ++i)
    {
        if(pageYOffset >= section.sectionOffset[section.sections[i]])
        {
            match = section.sections[i];
        }
    }

    if(match != section.currentSection)
    {
        section.currentSection = match;
        changeBackground();
    }
}

function changeBackground()
{
    var cbc, // Current background-color
        tbc, // Target backgrounc-color
        ri,  // Red incrementation
        gi,  // Green incrementation
        bi,  // Blue incrementation
        rgb, // Temporary color from cbc to tbc
        smoothness = 20; // Higher is smoother

    cbc = getStyle(document.body, 'background-color');
    cbc = cbc.substr(4, cbc.length-5);
    cbc = cbc.split(", ");

    tbc = section.sectionBackground[section.currentSection];
    tbc = tbc.substr(4, tbc.length-5);
    tbc = tbc.split(", ");

    ri = (tbc[0] - cbc[0]) / smoothness;
    gi = (tbc[1] - cbc[1]) / smoothness;
    bi = (tbc[2] - cbc[2]) / smoothness;

    for(var i = 1; i <= smoothness; ++i)
    {
        rgb = [
            Math.ceil(parseInt(cbc[0]) + (ri * i)),
            Math.ceil(parseInt(cbc[1]) + (gi * i)),
            Math.ceil(parseInt(cbc[2]) + (bi * i))
        ];

        setTimeout("document.body.style.backgroundColor = 'rgb(" + rgb.join(",") + ")'", i * (240/smoothness));
    }
}

function initialBackgroundChange()
{
    if(pageYOffset == 0)
    tryBackgroundChange();
}

function getStyle(elem, name)
{
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }

    else if (elem.currentStyle)
    {
        if (/backgroundcolor/i.test(name))
        {
            return (function (el)
            { // get a rgb based color on IE
                var oRG=document.body.createTextRange();

                oRG.moveToElementText(el);

                var iClr=oRG.queryCommandValue("BackColor");

                return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                        ((iClr & 0xFF0000)>>16)+")";
            })(elem);
        }

        return elem.currentStyle[name];
    }

    else if (elem.style[name])
    {
        return elem.style[name];
    }

    else
    {
        return null;
    }
}

</script>
</head>

<body>

<div id="section1"></div>

<div id="section2"></div>

<div id="section3"></div>

</body>
</html>

I'm a little unclear on what you what to achieve here, have you looked at other posts such as : http://stackoverflow.com/questions/23540959/how-to-change-background-image-with-static-css-and-maintain-it or http://stackoverflow.com/questions/7832140/jquery-change-background-image — Alicia, May 09 '14 at 15:05
Yes kinda like this but i want it that it happen automaticly when you scroll down... is this even possible? — user3620808, May 14 '14 at 08:32

score 0 · Answer 1 · answered May 09 '14 at 15:01

0

try this:

if($(document).scrollTop() == 400){
   $('body').css('background','red')
}

answered May 09 '14 at 15:01

user3605845

1

Thanks,but i not that good and what i see is it just change the color, but i want to change the background image. – user3620808 May 14 '14 at 08:23

Change Website Background(image) whit Section

1 Answers1