Background image inserted from assets by popup lacks quotes

Bug Reports
1

When a “background” image style is added to an element, to styles.css, BSS offers a popup section of images already added to assets. When a background image for an element is selected from the popup, the background does not appear in the canvas, although it is accepted as valid CSS.

The problem is that the image is inserted by BSS without quote marks. If double quote marks are added manually to the image URL, the background image appears.

Example: suppose the following CSS needs to be applied to the element with ID “promo”:

styles.css:

#promo {
  text-align: center;
  padding: 40px;
  background: url("myimage.jpg");
  background-size: cover;
}

When entering the above css to apply to the “promo” element, after typing background: url( BSS will show a popup dialog with the image files that have been added to page’s assets. Upon choosing myimage.jpg from the popup, it is inserted without double quotes. Only after manually adding the double quotes, as shown in the example above, does the background image work.

Edit: This issue is seen on Debian 10 (Linux). It may be specific to Linux. I have not tested on Windows or Mac.

2

It seems to work ok on windows, so could be a bug on the Linux version.

One thing I did notice, is that if I added the background image in the Appearance Tab then it would add the double quotes around the filename, but if I was manually adding code in the styles tab then it would not add the quotes unless I typed them, although with or without quotes then the image would show straight away in both bss and the preview window.

3

I can confirm that the bug is present in Mac version as well, and adding the quotes manually does fix it on Mac also.

4

Thank you for reporting this issue! We will fix it in our next update.