How to override background Image of body in jquery

Question

I have a jquery function addbluebody() which add blue color to the body,

and a function hideCongratAndBlueBody() which removes it.

My problem is that i already had a fixed backgroundImage set for my body, because of that the blue color is not showing on calling addbluebody()

how to override the backgroundImage of body and make visible bluecolor and again show backgroundImage when hideCongratAndBlueBody() ia called.

function addBlueBody() {
            $('body').addClass('bodyblue');
        }
        
function hideCongratAndBlueBody() {
            timeOut = setTimeout(() => {
                $('body').removeClass('bodyblue');
            }, 4000);
        }

.bodyblue {
            background: #3da1d1;
            color: #fff;
        }

body{
 background-image:url(nature image.jpg);
}

@scraaappy i want to regain backgroundImage on hideCongratAndBlueBody() — ironman, Sep 30 '18 at 21:16

score 0 · Answer 1 · answered Sep 30 '18 at 21:20

You shouldn't need to override it; .bodyblue has more specificity than body, and assuming your element is <body class='bodyblue'>, the jQuery will add the class and change the background automatically:

function addBlueBody() {
  $('body').addClass('bodyblue');
}

function hideCongratAndBlueBody() {
  timeOut = setTimeout(() => {
    $('body').removeClass('bodyblue');
  }, 4000);
}

.bodyblue {
  background: #3da1d1;
  color: #fff;
}

body {
  background-image: url(http://placehold.it/100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class='bodyblue'>

If you find that this doesn't work, either increase the specificity, or remove the background with background-image: none; on .bodyblue.

How to override background Image of body in jquery

1 Answers1