Streaming live at 10am (PST)

Make background image position start from right, not left

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.

Any suggestions? Are there plans for toggling between left/right and top/bottom in the background position property? Thanks!

Can you set the arrow to always be 10px in from the right of the button border?

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

That’s frustrating :smiley:
@sarahfrison Is it cool if I tag this topic as #feedback:bugs ?

1 Like

@partlysean :thinking: 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

@Ozone Depending on ts’s answer, it’s probably not a bug, either this fixes it or it’s a feature webflow doesn’t support natively yet.

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

Here’s the project link:

Thanks for your help!

You can fix this in two ways.

  1. Make your image for the button to include some empty space to the right of the graphic element and use 100% position.

  2. Much better. Don’t use buttons for your buttons. Use link div, put two objects inside - text and icon. This will give you way more flexibility.

1 Like

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 :smiley:

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!

Agree! This should just work. Frustrating. Changing whether a background image should be aligned from left or right is super basic css.

Nothing new on this?

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.