Search code examples
cssbootstrap-4background-imagebackground-position

Google Chrome multiple background images position

I would like to display multiple background images on the same element.

My Implementation looks like this: (using bootstrap)

<a class="left-icon icon-share list-group-item list-group-item-primary list-group-item-action">Exportable</a>

.list-group-item-action.left-icon {
   background-image: var(--icon-auto-url), var(--list-group-action-icon);
   background-position-x: var(--list-group-icon-padding-x), right var(--list-group-icon-padding-x);
   background-position-y: center;
}

Which does work as expected in Safari, however not in Chrome. Any ideas what am I doing wrong?

Safari:

enter image description here

Google Chrome:

enter image description here

Solution

  • Not all web browsers read code the same way. The issue with your code is that background-position-x is not supported in all browsers, including chrome. A more widely used property is simply just background-position.

    Here is what you can do:

    .list-group-item-action.left-icon {
   background-image: var(--icon-auto-url), var(--list-group-action-icon);
   background-position: var(--list-group-icon-padding-x) center, right var(--list-group-icon-padding-x) center;
}

    With this, you are putting both x and y coordinates in the background-position property which should be supported.