Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like 

url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg")

https://i.stack.imgur.com/8WKgv.png

Below is the code snippet in question: 

<div class="box_bg">
    <div style="background-image: url(img/bg/06.jpg)" class="single_bg"></div>
    <div style="background-image: url(img/bg/07.jpg)" class="single_bg"></div
</div>


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

<script>
    $('.box_bg .single_bg').each(function () {
        var bg_img = $(this).css('backgroundImage');
        $(this).click(function() {
            window.alert(bg_img);
        });
    });
</script>
jqueryhtmlcss

Answer №1

In case your inline css does not contain any additional properties, you can use the following script:

 $('.container_img .single_image').click(function () {
        var image_url = $(this).attr('style').replace('background-image: ','');
        alert(image_url);

  });

Check out the demo:https://jsfiddle.net/rh3uq4tf/

No need for each() when you simply want to retrieve the image URL upon clicking a specific image...

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

The data displayed in the <span> element isn't reflecting the response from the loaded page, despite being visible in Firebug

I have encountered a problem while trying to load a signup.php page into a div on my main page. All the elements (forms, JavaScript, etc.) function correctly in the loaded page, except for one issue - I cannot get the response from the PHP script to displa ...

phpjavascriptjqueryajax

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

jqueryhtmlcsscheckboxhtml-table

Calculating and displaying the output on an HTML page: A step-by-step guide

Within my HTML, I have two values stored in Session Storage: "Money" and "Time". These values are based on what the user inputted on a previous page. For example, if someone entered that they need to pay $100 in 2 days. My goal is to generate a list that ...

javascripthtmlmath

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Can someone assist me in figuring out how to apply multiple options to v-bind:class? In my Uno game, I need to determine the text color of cards based on their color property stored as a list of objects like this: ([{ Color: green, Value: 6}]. Here is my ...

javascripthtmlvue.jsvuejs2vue-component

Insert information into the #myModal window of Twitter Bootstrap

I'm struggling with this seemingly simple issue and can't seem to find a solution. Is there a way to insert a PHP variable into the link for this Twitter Bootstrap popup? <a href="#myModal" title="Learn more" value="12345" data-toggle="modal ...

phpjquerytwitter-bootstrappopup

The contents of the div disappear when using jQuery to extract it from a string

Update: I finally uncovered the reason behind the empty content of the #output div. The content is fetched from the server, which takes some time; by the time the document loads, the div remains empty. Does anyone have suggestions on how to extract infor ...

javascriptjqueryquery-string

Troubleshooting challenges with updating Ajax (SQL and add-ons)

I am currently facing some specific issues with an ajax update feature, but I am confident that it just requires some fine-tuning to work perfectly. Below, I will outline the problems clearly: In my setup, there are two files that interact with each othe ...

javascriptphpjquerysqlajax

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

Disclosure: I am still getting familiar with ReactJS I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application. Here's the concept: There's a small flag button in the to ...

javascriptcssreactjs

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

javascripthtmlcssreactjsmaterial-ui

Retrieve the HTML value of an element in Vue.js by clicking on its adjacent element

Hey there, I'm currently working on a simple notes app and I've hit a roadblock with one particular feature. In my project, I have a card element with a delete button as a child. What I need to achieve is to check if the value of the .card-title ...

javascriptjqueryhtmlvue.jsvuejs2

Turning off the ability to horizontally scroll in an iframe using touch controls

I am trying to disable horizontal scrolling in an iframe on my website, particularly when a user uses touch input and drags horizontally. The scroll bars can still be visible and draggable when touched directly. Unfortunately, I do not have control over th ...

htmlcssiframescrollhorizontal-scrolling

Integrating the Google Translate tool onto a website

My goal is to integrate a translation tool like Google Translator or other reliable options onto my website. I am not looking to translate the entire content of my pages into another language, but instead want to add a feature similar to the one found on t ...

htmlwebtranslationgoogle-translate

Optimizing the performance of "document.createElement"

When attempting to display multiple rows of data in a popup using a for loop, I initially utilized text strings to create and append the div elements. However, I discovered that using document.createElement resulted in a 20% improvement in performance. D ...

javascriptjqueryperformancedomcreateelement

Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. Below is the CSS code used ...

htmlcss

The inlineNav edit button is experiencing errors when used in conjunction with the multiselect feature in

My multiselect inline editable jqGrid with inlineNav is encountering some issues. The problem arises when following these steps: Click on the add button to display an empty record in the grid, add data, and save it. Select that record using the checkbox. ...

jqueryjqgrid

How to utilize a specific option as a variable within a PHP select dropdown menu

In my PHP code, I am retrieving data from an Azure SQL database and using it to populate a drop-down menu with options. The SQL query I used returns two columns: Title and Cycle_ID. After setting the Title as the text string and Cycle_ID as the value for ...

phphtmlsql

Adjusting the size based on the screen width of various devices

I'm currently working on a website that is not responsive, and I know I can make it responsive using media queries. However, this will be a significant task... I'm looking for a quicker solution to simply zoom or scale my website to match the dev ...

jqueryhtmlcss

Guide on incorporating the ":gt" filter from sizzle into vanilla javascript

I am currently working on adapting a jQuery plugin to be compatible with the AngularJS JQlite API, but I have encountered some challenges along the way. Here is an overview of the plugin: (function (e) { var $product = $('#product'), ...

javascriptjqueryangularjs

Using AngularJS to send data from a controller to a factory

Looking to implement a basic pagination feature with data from the backend. Each page should display 10 activities. /feed/1 -> displays 0-10 /feed/2 -> displays 10-20 /feed/3 -> displays 20-30 The goal is to start at page 1 and increment the pag ...

javascripthtmlangularjs

Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

I successfully animated a side navigation menu to slide in from the left of the screen. The animation is working perfectly, however, I had to set the div's width to 0px in order for it to appear as though it's sliding in from off-screen. If I ch ...

jqueryhtmlcssjquery-animate