This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Bäd Rick
Posted Sep 30 - Read on Facebook

Hi folks! Is it possible to set Background-Image size and position in this example?

11 Comments

Benjamin Den Boer

To create a background behind the avatar image, you mean?

Bäd Rick

Sorry I meant the Image size and Poistion

Bäd Rick

I dont know the properties i have to set

Benjamin Den Boer

Sure! The image is just a layer with an image property, so you can set it's width, height, x and y like any other layer. As in the example:

layerA = new Layer width:256, height:256, image: "image-url"

If you want to manually set the position, instead of centering it, you could simply add X and Y values:

layerA = new Layer width:256, height:256, x:10, y:20, image: "image-url"

Bäd Rick

I want to change the background-image position like in a div container. Imagine having a container height of 20 pix and a background image height of 200 px. Now I want to add 10 states each 20 px in y direction to show just a small part of the image. Is this possible?

Nadine Han

What about layerA.style = backgroundPosition: "0px 20px"

Bäd Rick

Thanks! I still need to understand how to write the CSS into the syntax but slowly I understand

Bäd Rick

One more question. How can I change the backgroundpostion according to states? I tried this but it doesn't work so far:

ResultsNumber.states.add
second: {backgroundPosition: "0px 40px"}
third: {backgroundPosition: "0px 80px"}

Koen Bok

CSS properties are not supported for states (yet).

Bäd Rick

So thats the reason. But I think it would be a very handy tool in future releases ;) Is there any other way to achieve the task?

Manaf Alnaqeeb

Hey Bad Rick, did you find a workaround to this? I've been having the same issue. I tried placing the layer into a parent then clipping it, but it was very glitchy. The layer would flicker during the "states" animation.

Read the entire post on Facebook