Unable to change background-image as intended

Question

Here is an example of my HTML code with an initial background image:

<div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div>

Everything seems to be working fine at first. But then:

$(document).ready(function() {
  $('#ffff').css('background-image', 'url(/uploads/lol.png) no-repeat');
});

Unfortunately, this change has no effect.

Answer 1

Answer №1

no-repeat should not be used as a background-image property. You can either delete it:

$('#ffff').css('background-image', 'url(/uploads/lol.png)');

or replace it with background:

$('#ffff').css('background', 'url(/uploads/lol.png) no-repeat');

Answer 2

no-repeat should not be used as a background-image property. You can either delete it:

$('#ffff').css('background-image', 'url(/uploads/lol.png)');

or replace it with background:

$('#ffff').css('background', 'url(/uploads/lol.png) no-repeat');

Answer 3

Get rid of the no-repeat:

$(document).on('load', function() {
  $('#elem').css('background-image', 'url(/images/example.jpg)');
});

You specified background-image only, instead of using just background. This can render the CSS invalid.

Answer 4

Get rid of the no-repeat:

$(document).on('load', function() {
  $('#elem').css('background-image', 'url(/images/example.jpg)');
});

You specified background-image only, instead of using just background. This can render the CSS invalid.