Changing the background on scroll using JavaScript and JQuery

Question

Changing the background on scroll using JavaScript and JQuery

Seeking a method to create a dynamic background image for different sections on a one-page website, I encountered difficulty in finding suitable examples online. After browsing through various questions on Stack Overflow, I attempted to implement the following 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>

However, this code does not appear to be functioning as expected. I am unsure of what is causing the issue and how it can be resolved, especially considering that the website needs to be responsive across various resolutions.

javascript jquery css

Answer 1

Answer №1

$(window).scroll(function () {
    var img_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 800) {
        img_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
    }
    $('body').css('background-image', 'url(' + img_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/>

Answer 2

$(window).scroll(function () {
    var img_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 800) {
        img_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
    }
    $('body').css('background-image', 'url(' + img_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/>

Answer 3

Answer №2

The syntax provided is incorrect; it should be corrected to:

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

You can also attempt the following code snippet:

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

Answer 4

The syntax provided is incorrect; it should be corrected to:

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

You can also attempt the following code snippet:

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

Answer 5

Answer №3

This particular script can be quite helpful for ensuring that your website background image changes dynamically as you scroll (similar to what was mentioned in other responses):

$(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+"')");    
});

However, imagine a scenario where you need the image to change not at 800 pixels but at a different point like 900 pixels. In such cases, rather than hardcoding the value in your code, it's advisable to utilize the

$("#whateverSection").offset().top

variable. For a demonstration, refer to this jsFiddle link.

By adopting this approach, you have the flexibility to determine which image should appear when specific sections of your site are scrolled into view.

$(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+"')");    
});

Answer 6

This particular script can be quite helpful for ensuring that your website background image changes dynamically as you scroll (similar to what was mentioned in other responses):

$(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+"')");    
});

However, imagine a scenario where you need the image to change not at 800 pixels but at a different point like 900 pixels. In such cases, rather than hardcoding the value in your code, it's advisable to utilize the

$("#whateverSection").offset().top

variable. For a demonstration, refer to this jsFiddle link.

By adopting this approach, you have the flexibility to determine which image should appear when specific sections of your site are scrolled into view.

$(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+"')");    
});

Answer 7

Answer №4

Ensuring compatibility

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

Double check your selector for accuracy

https://jsfiddle.net/js7tadve/

Answer 8

Ensuring compatibility

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

Double check your selector for accuracy

https://jsfiddle.net/js7tadve/

Changing the background on scroll using JavaScript and JQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am experiencing challenges with utilizing the fetch() function and am unable to retrieve the data

Concurrent Openlayers maps in Rails - A Viable Option

Guide to implementing Vuetify tabs alongside Vue Router

"Utilizing a media query to display an anchor link at the top based

Generating dynamic colors from a map in SASS within a media query function

Exploring the World of MVC 4: Delving into Modal Windows, Partial Views,

Loading FBX files with Textures in Three.js

rescaling and replicating a pattern in three.js

Guide on integrating a HemisphereLight into a basic Three.js environment

Issue with Django where only one out of six buttons is assigned the jquery popup window

centered table within a container with vertical alignment

Streaming large files with Node.js can lead to significant memory consumption and potential memory errors like OOM

Transferring data from AJAX form in JavaScript to PHP function

Set a predefined height for an element, yet ensure it adjusts to fit within its container (with the option to overflow only if it reaches a minimum specified height)

Issue with RestAngular: The put and customPUT methods are sending the outdated object instead of the updated one

Executing a dropdown menu click event using PHP and AJAX

Vue-router with a Google Inbox-inspired navigation interface

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Cross-Domain Communication with XMLHttpRequest

Troubles arise when trying to convert a schema using Normalizr