attr() in CSS can't be used in all the CSS properties, except content

Question

CodePen Example: http://codepen.io/haoyuchen1992/pen/XXXMZK

HTML CODE:

<li class = "test" profile="url(http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png)" contentDis = "contentDis">
        This is bad!
</li>

CSS CODE:

.test:before {
  right: -80px;
  background-size:cover;
  content:  attr(contentDis);
  background-image: attr(profile);
}

I don't know why the attr function works in content property. But for background-image, the profile string isn't apply correctly.

--- Solution Found!! ---

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

other properties are still not supported in major browsers.