Forum
Background Images made editable have CSS rules removed.
Hi there, I have a gallery block with alternating image sizes (square, landscape & portrait). They are CSS background images that are set to background cover. However when I make them editable in Perch by giving the option of uploading an image to become the background image, Perch removes the CSS properties that go with the background image i.e. background-position: 50% 50%; & background-size: cover; Any idea how to get around this? The Perch select is working and the classes selected are outputting their correct orientation, however making the background image editable removes any set rules that are set with it. Example perch block below:
<!--Gallery Block-->
<perch:block type="text3" label="Gallery Block">
<div class="container-wide">
<div class="gallery-wrapper">
<div class="project-row w-row">
<perch:repeater id="images" label="Images">
<div class="col-1 gal-col-1 w-col w-col-3 w-col-medium-6 w-col-small-small-stack w-col-tiny-tiny-stack">
<div class="practice-block">
<a class="overlay-off w-inline-block w-lightbox <perch:content type="select" id="selector" label="Select Thumbnail Size" options="Square|square, Landscape|landscape, Portrait|portrait" /> " data-ix="scroll-in1" rel="group" href="<perch:content type="image" id="gallery" label="test"/>" style="background:url('<perch:content type="image" id="galleryImage"/>');"><img class="image" src="<perch:content type="image" id="galleryImage" label="Image" /> ">
<script class="w-json" type="application/json">
{ "group": "Gallery", "items": [{
"type": "image",
"url": "<perch:content type="image" id="galleryImage" width="1800"/>",
"caption": "<perch:content type="text" id="caption" label="Image Caption"/>"
}] }
</script>
</a>
<div class="blue-line"></div>
<perch:content type="textarea" html="true" editor="ckeditor" id="galleryfeatText" label="Feature Text" />
</div>
</div>
</perch:repeater>
</perch:block>
<perch:block>
I don't see any such properties in your template. Only the perch content tag to upload the image. Perch won't remove something in the markup in your template.
Hi Rachel. It's working fine as HTML, but when in Perch, adding the piece of code
to allow the uploaded gallery image to be the background image of one of the 3 classes, it works but removes background-position: 50% 50%; & background-size: cover; which has a knock-on effect on how I want each of the images to fit their respective div size.
Cormac, in the template you posted you have no inline styling for the other background properties - you'd need to add them after the perch content tag if you want them to apply.
Can you show the html that works?
The HTML is fine. It's only when you make it editable within a perch template it breaks the image properties on the case CSS. I think Mathew is right, it needs inline styling on the Perch template to set to Cover again. Will try this and report back....
Yes, you need to have the properties in the template (or in your external CSS). We're not removing anything, it isn't there to start with.
Thanks Rachel. I think I spot the issue. It's because on my CSS I've declared the classes as background-image, whereas in my Perch template, where I want the option to upload I'm only calling style="background". When I add in the CSS as inline to the Perch template, it fixes the problem.