How do I Verify the CSS Background-Image URL with Javascript

The logic is to check the url of the CSS element's id(.boot). If the url matches, which it does, then it prints hello world. But it doesn't do anything and I don't know why.

Context: There's a button. I click it. It checks the CSS background url. If the url matches it creates an alert.

CSS:

.boot {
    width: 1000px;
    height: 1000px;
    background-image:url(Videos/printgifstart.GIF);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: fixed;
    bottom: -150px;
    right: 105px;
    z-index: 100;
}

HTML + Javascript

<div class="Logo2" id="blogo">
<h1></h1>
<div class="MirroredSmiles"></div>
<button id="ticketb" class="ticketb"
    style="height:100px;
        width: 75px;
        position: fixed;
        top: 335px;
        left: 200px;
        opacity: 0%;"
        onclick="tixbPLS">
</button>

    <script>
        var tix = document.getElementsByClassName('ticket');
        var tixb = document.getElementById('ticketb');
        var tixc = document.getElementById('ticketc');
        var sart = document.getElementById('shopdrawing');
        var sart2 = document.getElementById('shopdrawing2');
        var sart3 = document.getElementById('shopdrawing3');
        var sbakdo = document.getElementById('backdoor2');

        tixb.addEventListener('click', tixbPLS);

        function tixbPLS() {
            if (document.getElementById('boot').style.backgroundImage = url('Videos/printgifstart.GIF'))
            {
                alert("hello! world!");
            }
        }
    </script>
</div>

I looked online and the issue seemed to lean into a syntax error but I have played with the syntax for hours and it cannot print hello world.

I thought maybe this only works with images and even with an image still no luck.

I tried "=" or "==" still no luck.

I thought maybe somehwere in the code something else is the issue. So instead of the original if statement. I did a math equation type if statement and the alert worked perfectly.

So everything else is fine except for that singular if line.

You can reference the style sheet rules using the CSSStyleSheet API. Read the article on MDN and it will explain in full detail the example I have below => document.styleSheets[0].cssRules[0].style.backgroundImage.

NOTE: using your browsers console dev tools can really assist you with figuring these things out. Querying the document.styleSheets in your console will return the style sheet object and allow you to really get a visual on the objects make up and how it is constructed, then you can tailor your code to get the results you are looking for.

For Example, if I add console.log(document.styleSheets) to your JS code, it will produce the following object in the console Dev tools.

  "0": {
    /**id:2**/
    "ownerRule": null,
    "cssRules": {
      /**id:3**/
      "0": {
        /**id:4**/
        "selectorText": ".boot",
        "style": {
          "0": "width",
          "1": "height",
          "2": "background-image",
          "3": "background-repeat-x",
          "4": "background-repeat-y",
          "5": "background-size",
    ...

We have an object here. The first iteration of that object 0 has a cssRules object nested, the first iteration of that object has a style object, which is where the style background-image resides. So the following line of code will retrieve that data from the style sheet ==> document.styleSheets[0].cssRules[0].style.backgroundImage

Also, remember = is setting or assigning something, where as == and === is comparative, the later being a strict comparative operator. See this answer for more information.

Another important note in your instance is, document.getElementById('boot').style.backgroundImage is looking for the inline style, so if your .boot elements HTML had, say for example:

<div class="boot" style="background-image:url(Videos/printgifstart.GIF);"> 

then your example would work using the right comparator operand, but if your boot elements class comes from a style sheet you would need to use CSSStyleSheets API to read that information from your style sheet.

NOTE on I.E. error when using cssRules: As OP pointed out there is an issue with 'cssRules' on IE. One can add crossorigin="anonymous" to their link tag to prevent the error. Request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side TLS certificates or HTTP authentication, unless destination is the same origin.

var tix = document.getElementsByClassName('ticket');
var tixb = document.getElementById('ticketb');
var tixc = document.getElementById('ticketc');
var sart = document.getElementById('shopdrawing');
var sart2 = document.getElementById('shopdrawing2');
var sart3 = document.getElementById('shopdrawing3');
var sbakdo = document.getElementById('backdoor2');

function tixbPLS() {
  if (document.styleSheets[0].cssRules[0].style.backgroundImage == 'url("Videos/printgifstart.GIF")') {
    alert("hello! world!");
  }
}

.boot {
  width: 1000px;
  height: 1000px;
  background-image: url(Videos/printgifstart.GIF);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: fixed;
  bottom: -150px;
  right: 105px;
  z-index: 100;
}

<div class="Logo2" id="blogo">
  <h1></h1>
  <div class="MirroredSmiles"></div>
  <button id="ticketb" class="ticketb" onclick="tixbPLS()">Click me</button>
</div>