Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame:

background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/blue/r.png);
background-position: top left, right top, bottom left, bottom right, top, bottom, left,right;
background-repeat:  no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;

I am trying to create a JQuery program that can dynamically change these image sources. However, I am facing an issue with defining multiple background image changes in JQuery as only one image ends up changing.

Here is the problematic JQuery code:

$(document).ready(function() {
        $("#red").on("click", function(){
            $("#outer-frame").css({'background-image': "url(images/red/tl.png)", 'background-image': "url(images/red/tr.png)"});
            $("#outer-frame").css({'background-position': "top left", 'background-image': "top right"});
        });

If anyone has knowledge on how to properly implement this, your help would be greatly appreciated. Thank you for any advice you can provide.

javascriptjqueryhtmlcssbackground

Answer №1

If you want to apply multiple background images using JavaScript, you need to set the style property just once. Make sure to include all the background images in a single string value to prevent overwriting with each reset of the style.

$("#main-container").css({
    'background-position' : 'top left',
    'background-image'    : 'url(images/blue/top.png), url(images/blue/bottom.png)'
});

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

Having trouble updating state in React after making a fetch request

I am encountering an issue with setting the current user after a successful login. Even though the login process is successful and the data is accurate, I am unable to set the state as the user data appears to be empty. UserContext.js import React, { useC ...

javascriptreactjsreact-hooksfetch-api

The chat text will automatically scroll down, displaying information loaded from the database

Is there a way to ensure that chat text always remains scrolled to the bottom of the chat? I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me. Currently, my chat text overflows the textarea when there are too m ...

javascriptjqueryhtmlcssajax

What is the best way to maintain a Tampermonkey script within Selenium?

I'm trying to execute a JavaScript script before the page loads, so I've placed it in Tampermonkey. However, the script doesn't persist after closing the driver. Whenever I run the code again, the saved script is no longer there. This code u ...

javascriptpythonseleniumselenium-webdriverselenium-chromedriver

Enhance a DOM element using personalized functions in jQuery

Seeking advice on how to create custom widget placeholders with a "setvalue" function specific to each type of widget: $.fn.extend($(".dial"), { setval: function(val) { }); Attempting to avoid extending jQuery.fn directly since different widget type ...

javascriptjquerydom

Closing a dropdown on outside click in NEXT.JS can be done by adding an event

Currently, I am in the process of developing an ecommerce platform that features a search input with results displayed in a dropdown. The search functionality is working as intended, but now I would like to implement a feature where the dropdown closes whe ...

javascriptreactjsnext.js

Using Vue to dynamically upload multiple files simultaneously

Although this question has been asked frequently, most of the answers do not address a key issue - how to upload multiple images while knowing which image belongs to which data. Attempting to bind v-model to input file doesn't work as expected, and ev ...

javascriptvue.js

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

javascriptjqueryhtmlcss

Can you elaborate on the users object found in the npm registry JSON response?

When looking at the json response of any npm package, such as jQuery for example, http://registry.npmjs.org/jquery, you may come across a dictionary called users. This dictionary contains usernames as keys and boolean values as the corresponding values. ...

javascriptnpmjsonschemanpm-registry

Execute a PHP script to retrieve data from a database based on the content of a text element

I'm currently working on a web-based system and I'm wondering if it's possible to retrieve a Name based on the number entered in a text box. Here is what I have attempted so far, but I know it's not functioning properly. Is there an alt ...

javascriptphpmysqldatabase

Tips for running a function in CodeBehind triggered by jQuery?

In my Aspx code, I have the following: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebSite.View.Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

javascriptc#jqueryasp.netwebforms

Arranging Bootstrap Grids within Laravel

On my current web page, I have implemented Bootstrap Grids as seen in the image below. Check out My Bootstrap Grid Layout However, I am aiming to achieve a grid layout similar to the one shown in the picture with a red indicator. Here is the Desired Boo ...

phpcsslaravelbootstrap-4

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascriptjqueryhtmlcssinput

Keep the Bootstrap modal open while the JavaScript validation is running, and redirect the form action if the validation is successful

When trying to execute the submit event from a form, my code is supposed to keep the modal open if validation fails. However, for some reason, this functionality is not working as expected. var myForm = document.updteform; var condition = true; if ...

javascripttwitter-bootstrap

What is the best way to automatically populate additional autocomplete options after selecting certain data, and include new data if it is not already present?

Is it possible to automatically populate the other Autocomplete fields based on matching first and last names? I am encountering scenarios where multiple individuals share similar first or last names but have different addresses. In addition, I would like ...

javascriptreactjsmaterial-ui

Utilize the string module from a JavaScript file in your React or Next.js project

Within my project structure, I have a file named "test.js" located in the "/constants" directory. The content of this file is as follows: const test = "test!" export default test In another part of my project, specifically within the "/pages" folder, I w ...

javascriptreactjsimportnext.js

Best practices for loading and invoking Javascript in WordPress child themes

After spending countless hours searching for a detailed tutorial on how to properly incorporate Javascript into a WordPress website, I came up empty-handed. Running the Genesis Framework with a child theme on my localhost, I am eager to add a fullscreen b ...

javascriptphpjquerywordpress

I appear to be having issues with the pseudo-element. Is there something I am doing incorrectly? This relates to the first child

I initially tried to make the opening paragraph stand out by applying a red color, but unexpectedly, all elements on the page turned red. view image here <!DOCTYPE html> <html lang="en"> <head> <link rel="styleshee ...

htmlcss

What is the best way to implement OTP expiration time in Next.js using Firebase?

Could anyone please help me with setting the OTP expire time in Next.js using Firebase? I have searched through the Firebase documentation but haven't been able to find a solution to my issue. Below is the code I am using to send the OTP: const appV ...

javascriptfirebasenext.jsfirebase-authentication

What is the reason that jQuery does not work on HTML generated by JavaScript?

One of my JavaScript functions, named getImages, is responsible for loading the following HTML structure: // Function starts here function getImages() { $.getJSON(GETIMAGELIST, function(data) { var items = []; // Populating the HTML $.each(dat ...

javascripthtmljquery

Customize checkbox and label using jQuery

I have a scenario where I have multiple checkboxes and corresponding labels. When the answer is correct, I want to change the background color of the selected checkbox and label. <input type="checkbox" id="a" class="check-with-label" /> <label fo ...

javascriptjquerycssajax