How to call background-image URL in Javascript

Question

I have a section in Squarespace where I've set the background image via custom CSS:

background-image:url('https://images.squarespace-cdn.com/content/v1/5f187409db749f75b4b70872/1595438345426-RJBC7YPJSV4XRBU4WSDM/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg');
background-repeat:no-repeat;

I'm trying to apply this hover distortion effect on said background image, and need to call/target it but I don't know how as I'm not a developer - how would I go about doing so? Here's the Javascript code I have so far:

var myAnimation = new hoverEffect({
    parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background'),
    image1: ???,
    image2: ???,
    displacementImage: 'https://homesteadmodern.com/assets/displacement.png'
});

UPDATE

I managed to target the div more specifically with parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].page-section > div'), and have managed to use actual URLs in image1 and image2 which show up like a background image as intended. The only problem now is that the hover doesn't work anymore, even though it does work when I take out > div (but that causes the image to show up in the wrong place)! Any help?

score 1 · Answer 1 · answered Aug 10 '20 at 01:38

You can do this by using getComputedStyle() function.

var parent = document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background');
var bgImage = getComputedStyle(parent).getPropertyValue('background-image');

The value of bgImage will be this:

url("https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg")

which is the exact value you put in CSS. If you want to get the URL, you can add a replace() function, as suggested by this answer to a similar question:

var bgImage = getComputedStyle(parent)
        .getPropertyValue('background-image')
        .slice(4, -1).replace(/"/g, "");

The value of bgImage now will be:

https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg

Thank you so much. I've incorporated your code so image1 and image2 are now `bgImage`. but nothing seems to be moving yet. I think we're close though. Any ideas on what else needs to be done? The site is lizzykain.com (password is "test"). — discodancing, Aug 10 '20 at 04:49

Plover Brown · Answer 2 · 2020-08-10T05:43:18.033

0

ETA: It seems for this particular tutorial on distortion effects, you don't need to actually call a function. Simply assigning the new hoverEffect to a variable and including the hover-effect part of the robin dela library is sufficient to activate the effect.

You can use JavaScript mouseover and mouseout events.

i.e. where parent is selecting your element (and assuming you might like to change background image on hover and change back when no longer hovering):

const parent = document.querySelector("your HTML stuff here");

parent.addEventListener("mouseover", function(){
    parent.style.backgroundImage = "url('new-image-url')";
});

parent.addEventListener("mouseout", function(){
    parent.style.backgroundImage = "url('original-image-url')";
});

you can also style this as:

parent.onmouseover = function(){};
parent.onmouseout = function(){};

That can be fine if you're only ever doing one event on the element, is my understanding.

edited Aug 10 '20 at 05:43

answered Aug 10 '20 at 04:42

Plover Brown

11
4

Thanks for the suggestion! I did consider mouseover, however the point of the hover is to use a displacement image to create [this glitch effect](https://naughty-kirch-cd1373.netlify.app/) - not to change from one background image to another (for me the start and end images are meant to be exactly the same). Any thoughts? – discodancing Aug 10 '20 at 04:55
1

Ah, thanks for the clarification. I did a more in-depth look at the tutorial you linked, and following it, I found that I didn't need to actively call the function at all. Here's my go at it: https://rebgrasshopper.github.io/distortioneffect/ Why is it that you have an extra need for calling it? Is there a trouble putting in your image container? Oh, never mind, I understand - it's because it's in the background as CSS instead of simply being an empty div? Any reason you can't put in your link ONLY into the JS image1 and image2 spots? – Plover Brown Aug 10 '20 at 05:30
1

Also, just because you mentioned not being a developer, though you seem to be doing perfectly interesting things! I'm sure you already know, but just on the off chance you don't, you can view the source code for that link to compare our code in your file vs mine either through developer tools on your browser or here: https://github.com/rebgrasshopper/distortioneffect – Plover Brown Aug 10 '20 at 05:39
Thanks very much! Yeah the problem is because the background image is currently determined by custom CSS right now - I want it to be like a hero banner. I tried putting image URLs directly into image1 and image2 spots but nothing happens - the images don't even show up :( However, I did exactly that for a different div class `.page-section` as a test and the images show AND the hover distort effect works - it's just way off on the side of the site for some reason, and not showing as a background image! – discodancing Aug 10 '20 at 05:51
If you're curious as to what I'm working on by the way, the site is lizzykain.com (password "test") – discodancing Aug 10 '20 at 05:54
1

I may have come up against my lack of familiarity with squarespace. My only further idea is that I found that I couldn't get the distortion code to accept an image hosted online, but it sounds like that's not so much your problem at this point as placement and the particular language to target the squarespace section. So...... good luck! Sorry I couldn't help! – Plover Brown Aug 11 '20 at 22:09
No problem, appreciate your help regardless! I actually made some progress - now I'm just stuck on why the hover effect doesn't work in the div (but works in the parent section) – discodancing Aug 12 '20 at 04:05

How to call background-image URL in Javascript

2 Answers2