jQuery: How to add a string to a css property

Question

So here is what I'm trying to do. I have some divs with background images name Look-1.jpg - Look-6.jpg. what I need to do is to add -cut to all of them at once so basically change them to Look-6-cut.jpg.

The reason I'm trying to do this is because I have 2 collection of background images and I'm trying to switch them on different screen sizes.

Of course it's possible to do so with css but then I have to do each one of them one by one.

I was wondering if there's a way to achieve this using jQuery.

Thanks

<div class="item active" style="background: url('/assets/img/collection/Look-1.jpg') center center no-repeat;">
    <div class="carousel-caption item-caption">
        <h5 class="text-black">200 TC Cotton Percale Duvet Cover</h5>
        <a href="#" class="link-inline">View Product<i class="fa fa-angle-right"></i></a>
    </div>
</div>

Hi eimansepanta - there are many questions on the subject of background-image manipulation via jquery here on SO. Do some research and try a few things then you will get a better reception for your query. For example look at http://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery. — Vanquished Wombat, Dec 08 '16 at 23:19

score 0 · Answer 1 · answered Dec 08 '16 at 23:13

0

var backgroundStyle = $(".item").css("background");
var imageFileName = "someFile.jpg";
var modifiedImageFileName = "modifiedFileName.jpg";
backgroundStyle.replace(imageFileName, modifiedImageFileName);

$(".item").css("background", backgroundStyle);

I hope this helps :)

answered Dec 08 '16 at 23:13

Gedion D

11
3

2

Hi Gedion D. Does the OP not need to concatenate the extra string onto the end of the initial background image url, and potentially remove it again? He has mentioned responsiveness as an ambition and going portrait-landscape-portrait would seem to need a larger solution. Just thinking out loud. – Vanquished Wombat Dec 08 '16 at 23:17
I'm just replacing the filenames here. Look-1.jpg to Look-1-cut.jpg. No need of concatenation. – Gedion D Dec 08 '16 at 23:20

score 0 · Accepted Answer · answered Dec 08 '16 at 23:27

$("div").css('background-image',(i,cur)=>cur.replace('.jpg','-cut.jpg'));
$("div").each(function(){
  console.log($(this).css('background-image'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active" style="background: url('/assets/img/collection/Look-1.jpg') center center no-repeat;"></div>
<div class="item active" style="background: url('/assets/img/collection/Look-2.jpg') center center no-repeat;"></div>
<div class="item active" style="background: url('/assets/img/collection/Look-3.jpg') center center no-repeat;"></div>

Does this work for you? The first line replaces all occurrences of .jpg with -cut.jpg and the second simply prints the new values to prove that.

score 0 · Answer 3 · answered Dec 09 '16 at 00:19

I fiddled a bit around with dummy images but this should work for your -cut example too.

https://jsfiddle.net/5swgrfu6/6/

$(window).resize(function() {
var width = $(window).width();
if (width < 800) {
$(".item").css({"background": "url('https://dummyimage.com/200x200/ff0000/000') center center no-repeat"});
} 
else {
$(".item").css({"background": "url('https://dummyimage.com/200x200/000000/fff') center center no-repeat"});
 }
 });

jQuery: How to add a string to a css property

3 Answers3