0

I tried to find a way to make a changeable background image for a one pager. Basically when the user scrolls down to the "About us" section there should be a specific background image for that section, one for "Contact" and so on. It's either that I can't find it or there are not enough examples on the internet on this topic. After reading some questions on Stack Overflow I came up with this code:

<style>
    body {
        background-image:url('http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg');
    }
</style>
<script type="text/javascript">
    $(window).scroll(function() {
        var image_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';
        if ($(window).scrollTop() > 800) {
            image_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
        }
        $(body).css('background-image', image_url);
    });
</script>

It doesn't seem to work and I don't understand why. The website is responsive so the solution should include some explanation at least for making it work on different resolutions.

Improve this question
2
  • I think the syntax should be $('body').css('background-image', 'url(' + image_url + ')');. Notice the quotes around body and the url() around your image_url Commented Aug 11, 2015 at 9:15
  • Yeah, I was thinking that part might be the problem as well. I copied your code and replaced the $(body).css('background-image', image_url); part of my script with it. Still wouldn't work. Commented Aug 11, 2015 at 9:20

4 Answers 4

Reset to default
1 

$(window).scroll(function () {
    var image_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 800) {
        image_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
    }
    $('body').css('background-image', 'url(' + image_url + ')');
    //^^^^^^                          ^^^^^^               ^^^   
});
body {
    background-image:url('http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for your answer. It works as intended but how would you handle the responsivity in this case?
@MateiPanchios I didn't get you question. You mean to keep the background not to scroll with the page?
No, the website will be responsive, having paragraphs in every section. I'd like to make the background stick to every section while scrolling. I guess I can't control the height of the webpage on every resolution so probably I'd have to target the divs somehow.
1

incorrect the syntax it should be like this :

$('body').css('background-image', 'url(' + image_url + ')');

And you can try

if($(this).scrollTop() > 800)
Improve this answer

1 Comment

can you make fiddle and post it?
1

This code works for you (like in the other answers mentoinded):

$(window).scroll(function() {
    var image_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';

    if ($(window).scrollTop() > 800) {
        image_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
    }

    $("body").css('background-image', "url('"+image_url+"')");    
});

But what if you change your content on the site and the image should not change at 800 pixels but at 900 pixels? For this issue you should not define the 800 pixels hardcoded in your script, but rather use the $("#whateverSection").offset().top variable. Look in this jsFiddle

This way you can easily decide which image you want to show, when a specific section of your site scrolls in.

$(window).scroll(function() {
    var image_url = 'default.jpg';

    if ($(window).scrollTop() > $("#section1").offset().top) {
        image_url = 'img1.jpg'
    }
    else if ($(window).scrollTop() > $("#section2").offset().top) {
        image_url = 'img2.jpg'
    }
    ...
    else if ($(window).scrollTop() > $("#sectionX").offset().top) {
        image_url = 'imgX.jpg'
    }

    $("body").css('background-image', "url('"+image_url+"')");    
});
Improve this answer

Comments

0

Should work with

$('body').css('background-image', 'url(' + image_url + ')');

Make sure ur selector is ok

https://jsfiddle.net/js7tadve/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.