Background image layers

Thanks @xamdam777 for the report. Actually, as you already indicated, this happens when you import the style (and browser's CSS parsers are pretty messy), and unfortunately, in few cases, conflicts happen. (eg. Chrome generates a style that even itself doesn't understand)

the strange think happens here when you add a new layer as you see background-repeat and background-position contain more than 3 expected values (they have 5 for some reason). BTW if you would like to fix it you can probably start from the function which adds a new layer https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69

Thank you very much @artf, now I completely understand the problem, damned browser's parsers! :)

I have been doing some tests in addLayer() and refreshLayers().

This is my current approach, modifying refreshLayers() function, I try to detect the wrong layers and do not show them.

I placed the code below in line 131 of https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69 (near the end of refreshLayers function)

It seems to be working fine with a lot of bugged samples (it never shows bugged layers), but since it does not really removes the wrong code (the wrong CSS is still there), I wonder if this is a bad solution.

	var arrayWrongLayers = new Array;					
	var myLayersArray = layersObj;
	var arrayLength = myLayersArray.length;
	for (var i = 0; i < arrayLength; i++) {
		//console.log(myLayersArray[i]);
		var imagevalue= myLayersArray[i].properties[0].value;
		if(( imagevalue.toLowerCase().indexOf('.png') >= 0)||( imagevalue.toLowerCase().indexOf('.jpg') >= 0)||( imagevalue.toLowerCase().indexOf('.gif') >= 0)||( imagevalue.toLowerCase().indexOf('.jpeg') >= 0)||( imagevalue.toLowerCase().indexOf('.svg') >= 0)){
			console.log("It's image");
		} else {
			console.log("It's NOT image");
			arrayWrongLayers.push(i);
		}	
	}

       console.log("the wrong layers are" + arrayWrongLayers);

	var arrayWrongLayersLength = arrayWrongLayers.length;
	for (var i = 0; i < arrayWrongLayersLength; i++) {
		console.log(arrayWrongLayers[i]);
		//Deletes the last layer on the stack before rendering them in the style manager
               //Better to delete the layer by index, but I found problems doing that and pop() works too
		layersObj.pop();
	}

Maybe we could really delete the layer from the model using this approach?

Thanks again!