Forum

Thread tagged as: Question

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>
Cormac Kerrigan

Cormac Kerrigan 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

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

style="background:url('<perch:content type="image" id="galleryImage"/>');">

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.

Simon Clay

Simon Clay 127 points

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....

Rachel Andrew

Rachel Andrew 394 points
Perch Support

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.