Hi all, looking for some help regarding background image positioning.
I have a button with a icon in the background. To give it some padding to the right, I’m positioning it 90% from the left. However when the button label gets very long, it overlaps and breaks easily. If I could instead position it relative to the right of the element a fixed pixel distance, that would be great.
@Ozone Yeah that’s what I’m hoping to do, but unfortunately I can only position the arrow background image relative to the left of the button.
In CSS I would write background-position: right 32px center;, centering it vertically and 32px from the right. But in Webflow’s visual editor I can only position from the left.
@sarahfrison I put together a quick Webflow project that shows exactly what’s happening with the background positioning. And since I can’t add custom code without a hosting plan, I saved a JSFiddle that has the CSS solution I’m looking for (link in the Webflow project).
Thanks for the suggestions, @dram! These would definitely work and I explored doing both, but I was really hoping to get it to work in a single element.
Option 1 would require some additional production work when exporting from our icon library that I’d like to avoid.
Option 2 would be way more flexible, but it’s not as straightforward as applying a simple combo class to a button. Building a custom link like you suggest isn’t a big deal for me, but as we bring more designers into the project it introduces an additional layer of education to say “drag a button element to put a button on the site, unless it’s a button with an icon in which case you need to use a link block with a nested div.”
I’ll keep thinking about this, but in the meantime I might just write some custom CSS that targets our button icon combo classes to override the background-position manually.
If your designers are really inexperienced then creating a separate page with the UI Kit is essential. You will just tell them to copy button from “here”, change the text or icon itself and be done with it
Hi, I have the same problem. I have tried to make a div link but this messes up the ability to change the icon on hover through background-image. If I use the arrow icon as a child element I cannot change the the appearance when hovering over the “link”( the parent of the icon).
I hope the easiest solution would be to add the ability to change the “right” value, instead of only top and left. This is available in common css as well…
I want to second those thoughts, @RubenM. To cover my bases, I’ve been building buttons using the method @dram mentioned (link block + children elements for the label and icon) and while that does technically work, it doesn’t solve 100% of use cases.
I can’t edit a form submit button to have separate label and icon elements, for example, so if I want to have a right aligned icon with the appropriate spacing inside a submit button I’m out of luck. Same goes for other “native” Webflow elements like dropdowns and select boxes. And as you pointed out, you can’t change the icon’s appearance when hovering on that custom button without making a complex element trigger + interaction. I would way rather do that using a simple transition effect on the element.
I guess this is my frustration: Webflow is ostensibly a GUI for CSS and what I’m asking in this post is for that GUI to support a native CSS property that’s presently missing. Building custom buttons really isn’t a solution or a useful workaround, so I’m holding out hope that Webflow supports the ability for us to toggle the background-position between left/right and top/bottom.
Joining the party here, I agree with you last comment there @partlysean – its frustrating that the GUI doesnt actully handle what CSS can do. I hate having to add CSS to the custom code to resolve things like this. The “position” GUI box should update the fields to the right, so clicking the right options should update the value to ‘right’: 0% , not ‘left’: 100%
I’ve used a border on my object to create the correct spacing but this is hacking webflow and messy.
Same here, this should just work. I need to place an icon to the right of text links in a Rich Text element. And if this could just work with a right positioned background pic and some padding that would have been good. Now I’m stuck!
I don’t really understand what is the big issue with this post. @dram just gave to really good solutions. If those solutions didn’t work for your case just add the CSS properties on an embed element or on the page settings custom code section. I just did that to @partlysean example and it works just fine. Now, it is an extra step, but the embed can be added into a container with the button and it becomes just one reusable element.
The issue is – when you position the background to the right side with the UI you expect it to be 0% right, not 100% left. Is there a good reason it’s done this way? I couldn’t come up with one.
Sure, there is always a workaround, but in this case it’s a crotch for a UI done wrong.
There’s a wish for this behavior here, but it seems a bit overlooked because few people would actually consult the wishlist to upvote for behavior that is more nuances as a bug than a feature.
If the behavior is (1) unexpected (2) unhelpful, then it’s a bug and not a missing feature.
It seems like most people in this thread (myself included) would expect the indentation to follow the positioning = unexpected behavior.
It’s also not very helpful being stuck with coding options and applying additional CSS to achieve the expected outcome = not helpful.
what setting ar you using for this? I put together a quick button and you can use this setting to position it from the right side 
