Creating a dynamic background image for the ul/li div element

Question

Creating a dynamic background image for the ul/li div element

As a newcomer to website development, I am currently exploring how to dynamically set images in the ul/li elements within a div. Below is a snippet of the HTML code I have been working on:

<div class="results">
    <ul class="row">
        <li class="template hidden col-md-3">
            <div class="image">
                <!--img src='broken_file.png'-->
                <data>
                    <span class="name"></span>
                    <span data-before='faces' class="faces"></span>
                    <span data-before='genus' class="genus"></span>
                    <span data-before='vertices' class="vertices"></span>
                </data>
            </div>
        </li>
    </ul>
</div>

Furthermore, in another JavaScript file, I am attempting to access the 'image' div using the following:

$(li).find('image').css()

My objective is to insert an image URL within the css() method, but I am uncertain about the approach or if it is feasible at all.

javascript jquery html css

Answer 1

Answer №1

First and foremost, there is an error in your jQuery syntax. You need to enclose li in quotes since it's a string, and the image selector should have a . in front of it to indicate a class. In addition, you can apply the background image using CSS, as demonstrated below:

$('li').find('.image').css('background-image', 'url("my-image.png")');

Answer 2

First and foremost, there is an error in your jQuery syntax. You need to enclose li in quotes since it's a string, and the image selector should have a . in front of it to indicate a class. In addition, you can apply the background image using CSS, as demonstrated below:

$('li').find('.image').css('background-image', 'url("my-image.png")');

Answer 3

Answer №2

1) To add an image tag inside a div with the "image" class, use the following code:

$('li').find('.image').append($('<img src="http://example.com/image.jpg">'))

2) To change the source attribute of the image tag inside the div:

$('li').find('.image img').attr('src','http://example.com/newimage.jpg')

Answer 4

1) To add an image tag inside a div with the "image" class, use the following code:

$('li').find('.image').append($('<img src="http://example.com/image.jpg">'))

2) To change the source attribute of the image tag inside the div:

$('li').find('.image img').attr('src','http://example.com/newimage.jpg')

Creating a dynamic background image for the ul/li div element

Answer №1

Answer №2

Similar questions

Tips for emphasizing the current element without disrupting existing styles

Updating Bootstrap 5.3 Modal to Have a Fixed Backdrop when Opened (Using JavaScript/JQuery)

Having trouble logging out of ADFS 3.0 using Internet Explorer

Strangely Bizarre CSS Quirk

Returning to the previous page

Create custom error messages for loopback instead of using the default ones

JavaScript encountered an issue as it attempted to reference the variable "button" which was

In order to have a Node.js program run synchronously following a for loop

When the size is reduced, the content spills out of the div

Having trouble using jQuery to target the element "(this)"?

CSS grid-box experiencing issues due to interference from bootstrap styling

The express ratelimit message encountered an unanticipated token

Top method for managing missing sub-documents in MongoDB query outcomes

Placing an image at the forefront of all elements

Tips for preventing click events from interfering with execution in React

Converting an array of objects into a single object: A step-by-step

Problem encountered with a form element generating additional input fields upon click of a specific button

Adjust the color of the glyphicon icon within a date and time picker dropdown component

Determine the selected option in the dropdown menu upon loading the page and when clicked

"The jQuery AJAX function is displaying an error message indicating that the resource was