NoRedInk/style-elements/3.0.0

Style.Background

Background Image

image : String -> Property class variation

A background image that keeps it's natural width and height.

coverImage : String -> Property class variation

A background image that will scale to cover the entire background.

{ src : String
, position : ( Float, Float )
, repeat : Repeat
, size : Size
}
-> Property class variation
repeatX : Repeat
repeatY : Repeat
repeat : Repeat
space : Repeat

Leftover space between tiled images will be blank.

stretch : Repeat

Images will stretch to take up to take up leftover space. Background position will be ignored.

noRepeat : Repeat

Background Image Sizes

natural : Size

Keep the image at it's natural size.

cover : Size

Scale the image proportionally so that it covers the background.

contain : Size

Scale the image proportionally so that it fits entirely in view.

width : Length -> Size

Set only the background image width, the height will be scaled autmatically.

height : Length -> Size

Set only the background image height, the width will be scaled autmatically.

{ height : Length
, width : Length
}
-> Size

Set both the width and height independently. This can potentially skew the image.

Background Gradient

gradient : Float -> List GradientStep -> Property class variation

Here's an example of creating a background gradient:

Background.gradient 0 [ step Color.blue, step Color.green]

The first number of the gradient angle given in radians, where 0 is pointing up.

step : Color -> GradientStep
percent : Float -> Color -> GradientStep
px : Float -> Color -> GradientStep

Directed Gradients

gradientRight : List GradientStep -> Property class variation
gradientLeft : List GradientStep -> Property class variation
gradientUp : List GradientStep -> Property class variation
gradientDown : List GradientStep -> Property class variation
gradientTopRight : List GradientStep -> Property class variation
gradientBottomRight : List GradientStep -> Property class variation
gradientTopLeft : List GradientStep -> Property class variation
gradientBottomLeft : List GradientStep -> Property class variation