Utilize jquery to introduce a new background image to the webpage

I am looking to enhance my div element with an additional background image without replacing the existing one. Instead, I want to have multiple backgrounds, so that the new background URL is added below the first.

Below is a preview of what the original CSS will be like:

#cover-art {
    background:
        url('http://beta.mysite.net/img/banner1.png') top left no-repeat;
    padding:250px 0 0;
}

Using jQuery, I aim to add another line with an image URL below the first one as shown in the example below:

#cover-art {
    background:
        url('http://beta.mysite.net/img/banner1.png') top left no-repeat,
            url('http://beta.mysite.net/img/banner2.png') top left no-repeat;
    padding:250px 0 0;

}

It is worth mentioning that the CSS for #cover-art is located in an external style sheet.

javascriptjquerycssbackground

Answer №1

Check it out, but please note that this may not be compatible with older browsers:

var _oCurr = jQuery('#cover-art');
var _sBg = _oCurr.css('background-image');
_oCurr.css('background-image', _sBg + ', url(/img/banner2.png)');

Answer №2

Give this a shot:

const $element = $('#header-img');
const currentBg = $element.css('background-image'); // existing image
$element.css('background-image', currentBg +','+ 'img/header2.png'); // include new image

Answer №3

As far as I know, it is not possible to have two background images on one element.
Although CSS3 does allow for this capability, it may not be supported by all browsers. Here's a reference chart showing compatibility.

My suggestion would be to create an additional element within #cover-art and apply the same CSS properties to its child element except for the background image.

For instance

<div id="covert-art">
    <div id="child"></div>
</div>

The background image of #child will appear above its parent (#cover-art)

Take a look at this example fiddle.

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

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

htmlcss

CSS: Exploring the disparity in margin sizes between the right and left sides, even when measured using the same unit of measurement

I am currently dealing with the following CSS parameters: .container{ width: 100%; margin: 1rem; border: 1px solid black; } .inner-container{ margin: 1rem; border: 1px solid gray; } <div clas ...

cssmargin

Select the Date Month Year on the Calendar

However, all I am able to manage is to trigger an alert displaying the complete date and time. $(function() { $('#popupDatepicker').datepick(); $('#inlineDatepicker').datepick({onSelect: showDate}); }); function showDate(date) ...

javascriptjquerydatepicker

Retrieving an AJAX array POST in Laravel 5 Controller

Below is the structure of my form: <td> <input type="text" name='name[]' class="form-control"/> </td> <td> <input type="text" name='mail[]' class="form-control"/> </td> <td> <select na ...

phpjqueryarraysajaxlaravel

Retrieving information from an Object within a JSON response

After calling my JSON, I receive a specific set of arrays of objects that contain valuable data. I am currently struggling to access this data and display it in a dropdown menu. When I log the response in the console, it appears as shown in this image: htt ...

javascriptjqueryjson

The 'url' parameter has been deemed valid, yet the response from the upstream is deemed invalid

For my next js project, I am utilizing the Remotive API ( ) which provides a URL to the company logo. Here is how I am using it: <Image src={'https://remotive.com/job/1912073/logo'} className="w-6 aspect-sq ...

javascriptreactjsnext.js

Enable users to customize CSS style elements using a dropdown selection tool?

My website needs a theme but I can't decide on just one. Instead, I want to give the user the option to choose a theme from a dropdown menu. When an option is clicked, it will change the background image, color, and positioning of the site. For examp ...

cssdrop-down-menuthemes

Adjusting the opacity of images in a Bootstrap 4 Jumbotron without affecting the text

Is there a way to apply an opacity of 0.5 to only the background image in my jumbotron, without affecting the text? Currently, when I set the opacity for the background, it also affects the text. How can this be resolved? Below is the custom CSS file: .j ...

cssbootstrap-4

What is the best way to stack col-xs-6 elements instead of having them side by side?

My form fields are currently set up using 3 col-xs-6 classes, but I'm not seeing the desired layout. I am aiming for: | col-xs-6 | | col-xs-6 | | col-xs-6 | However, what I am getting is: | col-xs-6 | col-xs-6 | | col-xs-6 | I understand that th ...

javascripthtmlcssangularjs

Could a selection be replicated using flot?

Recently, I've been attempting to replicate a specific portion of the output from a textbox named #spectrum_selection. $('#spectrum').bind('plotselected', function(event, ranges) { $('#spectrum_selection').val(ra ...

javascriptjqueryflot

Is the NodeJS rmdir function experiencing issues specific to LINUX?

Currently, I have a NodeJS script section that runs on my Windows 10 machine with the latest Node version and another version on my CentOS8 Linux webserver. The code executes as expected on Windows but throws an error when running on Linux at this specific ...

javascriptnode.jsnpmbackend

Activate dual trigger for jquery modal feature

My code always doubles the previous function. var deleteModal = $('.bs-delete-modal-sm'); deleteModal.on('shown.bs.modal', function(event) { var button = $(event.relatedTarget); // Button that triggered the modal var recipientId ...

jquerybootstrap-modal

Issues with Tags Functionality in Rails 5 Bootstrap JavaScript

I encountered some unusual issues while using Bootstrap 4 with the Rails 5 javascript tags. Initially, everything was working smoothly on this project and I hadn't made any modifications to the js files. However, suddenly, my collapsible navbar dropdo ...

javascriptruby-on-railswebpackbootstrap-4asset-pipeline

Adjusting or cropping strokes in a JavaScript canvas

I am working with a transparent canvas size 200x200. The object is being drawn line by line on this canvas using the solid stroke method (lineTo()). I'm in need of making this object full-width either before or after ctx.stroke();. https://i.sstatic. ...

javascripthtmlcanvas

Should input fields be placed inside separate columns or share a column in Bootstrap to keep them together while being right justified?

When using Bootstrap, is it better to place separate input fields inside their own col or share a col to keep them together and right-justified? I have a combo and input that I want to display on the same row at the right-hand side of the screen. If I put ...

htmlcssbootstrap-5

Issue with Canvas rendering functionality

Having some trouble testing my app with canvasrenderer as a backup for webgl. I'm having difficulty getting it to start properly. renderer = new THREE.CanvasRenderer(); console.log('renderer', renderer); renderer.sortObjects = true renderer ...

javascriptcanvasthree.js

Sleek animation designed for a personalized cursor when hovering over an object

I'm currently working on improving the transition of the cursor for a smoother experience. Right now, the size abruptly changes when hovered over the target element. Any suggestions on how I can achieve a smoother increase in size, with a better anima ...

javascripthtmlcss

Function generator within a component

I have a class-based component and I need to declare a generator function for an API call inside it without using fetch.then. Below is the code snippet: class SearchField extends React.Component { componentWillUnmount() { this.props.clearSearchStat ...

javascriptreactjscomponentsgenerator

Responsive Menu Functionality Limited to Desktop Devices

I have created a customized template for a client that features a simple desktop and mobile menu system that switches based on css media queries. While I have successfully implemented this method on several other sites, I am facing some challenges with th ...

javascriptjquerycssmobile

jQuery's AJAX functions failing to trigger callbacks following a file upload

I am facing a challenge with an AJAX call that is designed to upload a file from an input form to a server: $(function(){ $("form").submit(function(){ var infile = $('#pickedfile'); var actFile = infile[0].files[0]; ...

node.jsjqueryexpress