mdgriffith / style-elements / Style.Background

Background Image

image : String -> Style.Property class variation

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

coverImage : String -> Style.Property class variation

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

imageWith : { src : String, position : ( Basics.Float, Basics.Float ), repeat : Repeat, size : Size } -> Style.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 : Style.Internal.Model.Length -> Size

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

height : Style.Internal.Model.Length -> Size

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

size : { height : Style.Internal.Model.Length, width : Style.Internal.Model.Length } -> Size

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

Background Gradient

gradient : Basics.Float -> List GradientStep -> Style.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 : Style.Color -> GradientStep

percent : Basics.Float -> Style.Color -> GradientStep

px : Basics.Float -> Style.Color -> GradientStep

Directed Gradients

gradientRight : List GradientStep -> Style.Property class variation

gradientLeft : List GradientStep -> Style.Property class variation

gradientUp : List GradientStep -> Style.Property class variation

gradientDown : List GradientStep -> Style.Property class variation

gradientTopRight : List GradientStep -> Style.Property class variation

gradientBottomRight : List GradientStep -> Style.Property class variation

gradientTopLeft : List GradientStep -> Style.Property class variation

gradientBottomLeft : List GradientStep -> Style.Property class variation