Handle size of backgroundimage

[mikel 1,823 Likes (Superhero)]

Hi,

 

can´t handle size from 220% to 100% - see Codepen.

 

Best regards

Manfred

See the Pen waxKxL by mikeK (@mikeK) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi mikel 

 

pls try this :

TweenMax.to(".slide01",3,{ backgroundSize:"100% 100%" })

and in your css :

background-size: 220% 220%;

[mikel 1,823 Likes (Superhero)]

Hi Diaco,

 

thanks for Your advice.

 

My problem: one value = image keeps ratio (window resize); two values and the ratio will be deformed.

 

Is there another way?

 

Best regards

Manfred

[Diaco 1,948 Likes (Superhero)]

pls try this :

TweenMax.to(".slide01",3,{'background-size':'100%'});

[mikel 1,823 Likes (Superhero)]

Hi Diaco

 

Thanks a lot. That´s great. After frustrating hours I´m really happy.

 

Best regards

Manfred

[Jonathan 5,176 Likes (Superhero)]

Nice Diaco,

 

What is happening mikel, is if width or height is omitted the spec states that the component, in this case (height) will be set to auto and then will have its dimension calculated.

 

Please see background-size spec:

• If the background-size has one auto component and one non-auto component:
  If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.  If the image has no intrinsic proportion, use the specified dimension for that dimension.  For the other dimension, use the image's corresponding intrinsic dimension if there is one.  If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size