ipf-backgroundsize

Specifies the size of a background image.

• Format: ipf-backgroundsize(Size)

  Size can be auto, contain, cover, or a tuple with [Width, Height]. When using auto, the original size of the image is used. Using contain scales the image, while preserving its aspect ratio, to the largest size such that both its width and its height can fit inside the background area. Using cover scales the image, while preserving its aspect ratio, to the smallest size such that both its width and its height can completely cover the background area. Using width and height scale the image to the specified length in the corresponding dimension. If percentage values are used for width or height, the image is scaled in the corresponding dimension with a percentage of the container size. If the ipf-backgroundattachment style is used with a value of fixed, the percentage values are a percentage of the browser window size. Using auto for one dimension is also allowed along with a length value and means that the dimension will be scaled to a size that preserves the aspect ratio of the image. For example, an image that is 100 pixels wide and 200 pixels tall that is used as a background with a size specification of [10px, auto] makes the background image 10 pixels wide and 20 pixels tall.

  When multiple background images are used, each image layer can be positioned by using a tuple with the same length as the one used for the ipf-backgroundimage style. Each position value in the tuple then affects the image at the same position in the tuple used in the ipf-backgroundimage style. For example, if there are two background images used, ipf-backgroundsize([auto, contain]) uses the original size for the first image and scales the second image to fit inside the container.

• Default parameter value: auto
• Not inherited
• Example: ipf-backgroundsize(contain) on the modal window: