Change CSS background from JS/jQuery

Question

.u-section-1 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("images/curtains/curtains_header.jpg");
  background-position: 50% 50%;
}

I'm having this class in .css and this jquery. I'm not able to change the background image.

$('.u-section-1').css("background-image", "linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images/xabbb-min.jpg')");

The HTML is something like that:

  <section class="u-align-center u-clearfix u-image u-shading u-section-1" id="carousel_4db0">

I also tried with 'document.getElementById or ElementsByClassName. The JS file is running but the change doesn't occur.

Thank you in advance for trying to help me.

CSS path contains images/curtains/ and JS code images/, so I am not sure is it correct or not — Onkar
– Onkar, Commented Dec 31, 2020 at 12:46

Onkar · Accepted Answer · 2020-12-31 13:02:58Z

2

Nothing wrong with the code, I have replaced the images with CDN link and add button to change the background-image, and it works well

$(function(){
 $(document).on('click','.bgChange', function(){
 $('.u-section-1').css("background-image", "linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://picsum.photos/seed/picsum/200/300')");
 });
});

.u-section-1 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("https://picsum.photos/id/237/200/300");
  background-position: 50% 50%;
  height:200px;
  background-size:contains;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="u-align-center u-clearfix u-image u-shading u-section-1" id="carousel_4db0"><br/>
<button class="bgChange" stype="button">Change BG</button>

edited Dec 31, 2020 at 13:02

answered Dec 31, 2020 at 12:53

Onkar

2,5942 gold badges16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change CSS background from JS/jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related