Is it possible to nest function calls in CSS?

I have the following css ID:

#SecondaryLayout__rightBgImg {
  background-image: "SOMETHING IS GOING TO BE HERE";
  height: 800px;
  width: 100%;
  background-size: cover;
}

and I have the following HTML Element:

<div id="SecondaryLayout__rightBgImg">...</div>

I need to be able to set the background image from the HTML element, so what I did is that I changed the HTML element to the following:

<div id="SecondaryLayout__rightBgImg" img="/somewhere/photo.jpg">...</div>

and changed the css ID to the following:

#SecondaryLayout__rightBgImg {
  background-image: url(attr(img)); /* LOOK HERE */
  height: 800px;
  width: 100%;
  background-size: cover;
}

However, this url(attr(img)) isn't working.

but why? and is it possible to nest function calls in css? what is the better approach for this case?