# CSS property in editadle area **URL:** \ **Category:** Editable areas\ **Created:** [October 14, 2021, 8:46am UTC](https://forum.pinegrow.com/t/css-property-in-editadle-area/5760 "2021-10-14T08:46:38Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![miltonardila](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/miltonardila/32/2396_2.png) [@miltonardila](https://forum.pinegrow.com/u/miltonardila)\ **Post date:** [October 14, 2021, 8:46am UTC](https://forum.pinegrow.com/t/css-property-in-editadle-area/5760/1 "2021-10-14T08:46:38Z")
Hi, I have a HTML Blog template and I want to give Pinegrow the opportunity to use the components and CMS system. I have followed the tutorial on components, editable areas, etc. So far so good. But in the template I have, the background image of the main banner is changed as a CSS property, and the editable areas system doesn’t recognise the classes. How can I make editable only that property, or how can I change that background image from components? I attach images: CSS Rule: ![Screenshot 2021-10-14 at 10.27.50](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/462b1e4f319e105fcbc8a57e659b9cf1e9425120.png) This is how Pinegrow detects it: ![Screenshot 2021-10-14 at 10.28.17](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f61137cc946ea30742e692d52b72931c820c8fbd.png) But in the editable area they do not appear: ![Screenshot 2021-10-14 at 10.28.51](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/50ceb33f917deab625bf339a35897eae8ecb2aa0.png) I hope you can help me, thank you. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [October 14, 2021, 9:31am UTC](https://forum.pinegrow.com/t/css-property-in-editadle-area/5760/2 "2021-10-14T09:31:46Z")
Hi @miltonardila, I hope I can help out. So, when you define an element as editable, you are defining what parts of that element the user can change. The CSS rule that you are pointing out isn’t really part of the element. It just points to it. If you look at the element, it will have a class of `overlay`, but none of the other classes shown in the rule. Adding classes to the editable action allows the end user to toggle the class(es) on and off. So for example, to remove the `overlay` class. The best way to accomplish what you want to do is to check the box for the editable action that is currently hidden by your classes dropdown. This will add an inline assignment for the background image for any component instances. This inline image will override the stylesheet and allow the end user to set a new background image. Make sense? Bob ---
**Author:** ![miltonardila](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/miltonardila/32/2396_2.png) [@miltonardila](https://forum.pinegrow.com/u/miltonardila)\ **Post date:** [October 14, 2021, 9:42am UTC](https://forum.pinegrow.com/t/css-property-in-editadle-area/5760/3 "2021-10-14T09:42:00Z")
Hi @RobM thank you very much for your help. Ok, I understand what you are saying. I have changed the option and now I have the option to upload the image directly. I attach screenshots, do you think that replacing the image in this way, can create a conflict and then in production there are problems? ![Screenshot 2021-10-14 at 11.35.13](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8d247c0d879ebb4801a69021c08f03c0634ac1e4.png) ![Screenshot 2021-10-14 at 11.36.02](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f2666b23f9d0d0caaca06491f3a3cb113efbdcf1.png) ![Screenshot 2021-10-14 at 11.38.25](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/eda8fd3edd00dca13ed8da71e474f0a467037e1b.png) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [October 14, 2021, 10:02am UTC](https://forum.pinegrow.com/t/css-property-in-editadle-area/5760/4 "2021-10-14T10:02:52Z")
Hi @miltonardila I assume the third screenshot is the component on the child page? This method shouldn’t present any problems. I’m not sure of the rest of your page structure and why setting that background image required 3 class names for the rule. But setting the image inline should work fine. Cheers, Bob ---
**Author:** ![miltonardila](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/miltonardila/32/2396_2.png) [@miltonardila](https://forum.pinegrow.com/u/miltonardila)\ **Post date:** [October 14, 2021, 10:25am UTC](https://forum.pinegrow.com/t/css-property-in-editadle-area/5760/5 "2021-10-14T10:25:00Z")
Ok @RobM I think your help has been great. I will work this way the images from CSS. Best regards and thank you very much. Cheers, Milton.