ipf-backgroundimage

Specifies a background image for the element.

• Format: ipf-backgroundimage(ImageUrl)

  ImageUrl can be none or the URL for an image. You can also add multiple background images, or a combination of background images and background gradients, by wrapping multiple URLs and gradients inside of a tuple. The background gradients have the same syntax as the gradient specifications in ipf-backgroundgradient. An example of using a combination of background images and gradients is: ipf-backgroundimage([[vertical, rgba[200,200,200,0.5], rgba[255,255,255,0.8]], Images/blue-bike-graphic3.png]). When multiple background images and gradients are used, they are stacked on top of each other in layers, starting with the first entry in the tuple on top and the last on the bottom. So if an opaque image that fills the whole container or an opaque gradient is being used at a position other than the last one in the tuple, it will hide any following images or gradients.

• Default parameter value: none
• Not inherited
• Limitation: This style cannot be used together with ipf-backgroundgradient.
• Examples: ipf-backgroundimage(Images/blue-bike-graphic3.png) on the modal window. Notice how the image is repeated, or tiled, as that is the default behavior:
  
  

  When you add a gradient on top of the image, it looks like this: ipf-backgroundimage([[vertical, rgba[200,200,200,0.5], rgba[255,255,255,1]], Images/blue-bike-graphic3.png]) on the modal window. Notice how the background image fades away due to the bottom of the gradient being opaque: