The issue of the background image not updating with jQuery persists in Internet Explorer 11

Hello everyone, I am facing an issue where I am trying to change the background image of a div using jQuery on click. The code I have written works perfectly on all browsers except for IE. Can someone please provide me with some guidance or help on how to resolve this issue?

<div id="section1" class="section111">
    <div class="container">
        <div style="width: 100%; z-index: 999999999;" class="ServicesTitle">
            <p class="Main_TitaleServices">SERVICES & SOLUTIONS</p>
            <p class="slogan">Full Solutions for a Perfect Business   </p>
        </div>
        <div id="title-underline" style="margin-bottom: -30px;">
            <img src="../../App_Themes/ThemeEn/Images/title-underline.png">
        </div>
        <div class="firstrow">
            <div class="col-lg-3 divServices ">
            </div>
        </div>
    </div>
</div>

Below is the script that I am using:

<script>
$(function () {
    $("#WebsiteDevelopment").click(function () {
        $("#section1").css("background-image", "url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important")
        /
    });

    $("#btnWebsiteDevelopment").click(function () {
        $("#section1").css("background-image", "url(/App_Themes/ThemeEn/Images/section1bg.png")
    });
});
</script>
javascriptjqueryhtmlcss

Answer №1

Consider setting the background property instead of background-image.

<script>
$(function () {
$("#WebsiteDevelopment").click(function () {
    $("#section1").css("background", "url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important")
    /

});
$("#btnWebsiteDevelopment").click(function () {


    $("#section1").css("background", "url(/App_Themes/ThemeEn/Images/section1bg.png")

});
});
</script>

You can also try a pure JavaScript approach,

document.getElementById('section1').backgroundImage = "url('url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important')";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Seeking to duplicate an object, I am trying to figure out how to retrieve class CSS attributes from Mootools. css: .card { width: 109px; height: 145px; } html: <div id="cards"> <div class="card" id="c0"> <div class="face fron ...

javascriptcssmootools

Does Next js Backend support multithreading as a default feature?

As I begin my project, I am utilizing the built-in Node js server within Next js by running the next start command. However, I am uncertain as to whether it has multithreading capabilities. My inquiry is this: Would you suggest sticking with the built-in ...

javascriptnode.jsmultithreadingnext.jspm2

Having trouble with the href attribute not properly redirecting to a different page

I am trying to create a hyperlink for an option that will take users to another page. All the other options on the page lead to different sections within the same page. When I add CONTACT, it doesn't work. All the files are in the same ...

javascripthtmlcssnode.jsbootstrap-4

The expression req.files consistently comes back as an empty [object]

I have been encountering an issue with saving uploaded files using their original names (with express-fileupload). Whenever I upload a file, it gets saved in the directory as [object Object]. Node: var express = require('express') var app = exp ...

javascriptnode.jsexpressfile-upload

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

javascriptjqueryhtmlangularjsajax

Sorting tables in jQuery using a plugin

I discovered a jquery plugin that can be found at: Initially, I was successful in implementing it on a static table. However, my current challenge involves trying to make it work with a table populated from a database using ajax calls. I have included the ...

jqueryajaxsortingjquery-plugins

Styling elements using flexbox and various other divs

Looking to style a webpage with CSS to achieve this particular layout: https://i.sstatic.net/K3x0A.png The objective is to make the page responsive where the red and blue columns (left and right) have fixed widths. The center column should be collapsible ...

htmlcssflexboxresponsive-design

Issue encountered when populating the list of orders along with an array of merchandise items

I am currently in the process of developing an e-commerce website using React, Node, and MongoDB. The order schema I created includes the cmdRef (string), the client ID, and an array of products (with product IDs and quantities) as shown in the code below: ...

javascriptnode.jsreactjsmongodbmongoose

Tips for deactivating the highlight on a previously selected menu item when clicking on the next menu option in Angular.js

In my pages, I have a menu where the landing page menu is initially highlighted. However, when I move to the next menu, the previous landing page highlight remains instead of being removed while swapping the menu. I am using Angular.js and angular ui-route ...

javascriptangularjsangular-ui-router

Gulp Watch fails to identify changes in the SASS SCSS directory

After setting up Gulp to compile SCSS into CSS using NanoCSS and gulp-css for the first time, I encountered an issue. While my do-sass command successfully compiles SCSS and minifies CSS files, it does not run when placed within a watch task. Any changes ...

javascriptnpmgulp

In React, what is the correct term for "selection boxes" when choosing multiple items in Finder?

I'm in search of a React component that allows me to select multiple elements on the screen by clicking, holding, and forming a square around them. I've tried searching for terms like 'selection box' and 'React select elements,&apo ...

javascriptreactjsreact-nativeterminology

The error message states: "An uncaught TypeError has occurred - the object does not possess the 'jqzoom' method."

I am encountering a browser console error while working on a project involving a magento website. Specifically, I need to implement the jqzoom feature on the product view page. Here's what I have done so far: Added jQuery Included the jqzoom librar ...

javascriptjquerymagentojqzoom

Is there a reason why the integration of OnsenUI with Vue using vue-onsenui and v-ons-segment is not functioning

I am experiencing an issue with OnsenUI and VUE vue-onsenui v-ons-segment. Instead of displaying a button bar in a row as expected, I am seeing standard buttons. The problematic code resides in a customized Monaca CLI project utilizing the minimal VUE tem ...

cssvue.jsvuejs2segmentonsen-ui2

Trigger Ajax POST on modal close button click

I am facing an issue with my modal where it still performs an Ajax post even after clicking the 'Close' button. I want to prevent the Ajax post when the user clicks on 'Close'. Any suggestions on how to handle this situation? Modal &l ...

jqueryajaxtwitter-bootstrap

Looking for a solution to dynamically fill a list in JQuery with data from a JSON file. Any suggestions for troubleshooting?

Currently, I am utilizing a JSON file to fetch Quiz questions. In my approach, each question is being stored in an array as an object. The structure of the question object includes 'text' (the actual question), 'choices' (an array of po ...

javascriptjqueryhtmljsonfirebug

Is your event listener failing to activate?

I have been working on a project where I gather array elements from user input and try to display them in an HTML table. Unfortunately, the event listener seems to not be triggering, and I can't figure out why. Here is the relevant HTML code: ...

javascripthtmldom-events

Comparing Ajax HTML with XML/JSON responses: which is better for speed or other considerations

I have a website that heavily relies on ajax, and I insert around 3k html formatted pages into the DOM through ajax requests. My current approach involves inserting the entire html responses using jQuery. However, another option is to output in xml or jso ...

htmlxmlajaxjson

Operating PHP program from html on Beaglebone Black Rev C Debian

I've created a JavaScript program that utilizes node.js to manage GPIO from an IO.html page to the beaglebone. I simply initiate the JavaScript with "node myscript.js". Now, I'm looking to incorporate a PHP file that will store data from the IO. ...

javascriptphphtmlmysql

retrieve the data within a specific tag

Can someone help me with the following HTML structure: <div class="dk_options"> <ul class="dk_options_inner"> <li class="dk_option_current"><a data-dk-dropdown-value="">Select State</a></li> <li class= ...

jquery

Adjusting package.json settings for an npm module

An npm package that I am using has an incorrect file path specified in its package.json. The current configuration is: "main": "./htmldiff.js", However, for it to function correctly, it should be: "main": "./src/html ...

javascriptnpm