This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Css.Background

Sets the background properties for the element. You can set the color, image, position, size, repeat, and attachment.

#Definitions

type Repeat = Repeat | RepeatX | RepeatY | NoRepeat

Represent how to repeat the background image

Repeat - The background image will be repeated both vertically and horizontally.

RepeatX - The background image will be repeated only horizontally. This is really useful to repeat a gradient or some other thin background to save on storage space, and decrease loading time.

RepeatY - The background image will be repeated only vertically.

NoRepeat - The background image will not be repeated.

type Attachment = Scroll | Fixed | Local

Represent whether the background image is fixed or scrolls with the rest of the page.

Scroll - The background scrolls along with the element.

Fixed - The background is fixed with regard to the viewport.

Local - The background scrolls along with the element's contents

#Strings

repeatString : Repeat -> String

Convert a repeat type to the string form so it works with css.

import Css.Background as Background

Background.repeatString Background.Repeat -- "repeat"
attachmentString : Attachment -> String

Convert the attachment type to the string form so it works with css.

import Css.Background as Background

Background.attachmentString Background.Scroll -- "scroll"
pointString : number -> number -> String

Take two integers and append "px" so it works with css.

import Css.Background as Background

Background.pointString 5 10 -- "5px 10px"

#Functions

color : Color -> Styles -> Styles

Set the background color.

import Css.Background as Background

-- [ ("background-color", "rgba(255, 0, 0, 1)") ]
Background.color (rgba 255 0 0 1) []
image : String -> Styles -> Styles

Set the background image.

import Css.Background as Background

-- [ ("background-image", "url(\"paper.gif\")") ]
Background.image "paper.gif" []
position : number -> number -> Styles -> Styles

Set the starting position of the background image.

import Css.Background as Background

{-- [ ("background-image", "url(\"smiley.gif\")")
   , ("background-position", "50px 100px")
   ] --}
Background.image "smiley.gif"
<| Background.position 50 100 []
size : number -> number -> Styles -> Styles

Set the size of the background image

import Css.Background as Background

{-- [ ("background-image", "url(\"img_flwr.gif\")")
   , ("background-size", "80px 60px")
   ] --}
Background.image "img_flwr.gif"
<| Background.size 80 60 []
repeat : Repeat -> Styles -> Styles

Set how the background repeats

import Css.Background as Background

{-- [ ("background-image", "url(\"img_flwr.gif\")")
   , ("background-size", "80px 60px")
   , ("background-repeat", "no-repeat")
   ] --}
Background.image "img_flwr.gif"
<| Background.size 80 60
<| Background.repeat Background.NoRepeat []
attachment : Attachment -> Styles -> Styles

Set whether a background image is fixed or scrolls with the rest of the page.

import Css.Background as Background

{-- [ ("background-image", "url(\"w3css.gif\")")
   , ("background-repeat", "no-repeat")
   , ("background-attachment", "fixed")
   ] --}
Background.image "img_flwr.gif"
<| Background.repeat Background.NoRepeat
<| Background.attachment Background.Fixed []
module Css.Background where

{-| Sets the background properties for the element.
You can set the color, image, position, size, repeat, and attachment.

#Definitions
@docs Repeat, Attachment

#Strings
@docs repeatString, attachmentString, pointString

#Functions
@docs color, image, position, size, repeat, attachment
-}

-- Native Imports
import Color exposing (Color, rgba)

-- My Imports
import Css exposing (Styles, colorString, px, url)


{-| Represent how to repeat the background image

Repeat -
  The background image will be repeated both vertically and horizontally.

RepeatX -
  The background image will be repeated only horizontally.
  This is really useful to repeat a gradient or some other thin
  background to save on storage space, and decrease loading time.

RepeatY -
  The background image will be repeated only vertically.

NoRepeat -
  The background image will not be repeated.
-}
type Repeat
    = Repeat
    | RepeatX
    | RepeatY
    | NoRepeat


{-| Represent whether the background image is fixed or scrolls
with the rest of the page.

Scroll -
  The background scrolls along with the element.

Fixed -
  The background is fixed with regard to the viewport.

Local -
  The background scrolls along with the element's contents
-}
type Attachment
    = Scroll
    | Fixed
    | Local


{-| Convert a repeat type to the string form so it works with css.

    import Css.Background as Background

    Background.repeatString Background.Repeat -- "repeat"
-}
repeatString : Repeat -> String
repeatString repeat =
  case repeat of
    Repeat ->
        "repeat"

    RepeatX ->
        "repeat-x"

    RepeatY ->
        "repeat-y"

    NoRepeat ->
        "no-repeat"


{-| Convert the attachment type to the string form so it works with css.

    import Css.Background as Background

    Background.attachmentString Background.Scroll -- "scroll"
-}
attachmentString : Attachment -> String
attachmentString attachment =
  case attachment of
    Scroll ->
        "scroll"

    Fixed ->
        "fixed"

    Local ->
        "local"


{-| Take two integers and append "px" so it works with css.

    import Css.Background as Background

    Background.pointString 5 10 -- "5px 10px"
-}
pointString : number -> number -> String
pointString x y =
  (px x) ++ (px y)


{-| Set the background color.

    import Css.Background as Background

    -- [ ("background-color", "rgba(255, 0, 0, 1)") ]
    Background.color (rgba 255 0 0 1) []
-}
color : Color -> Styles -> Styles
color c styles =
  Css.style "background-color" (colorString c) styles


{-| Set the background image.

    import Css.Background as Background

    -- [ ("background-image", "url(\"paper.gif\")") ]
    Background.image "paper.gif" []
-}
image : String -> Styles -> Styles
image path styles =
  Css.style "background-image" (url path) styles


{-| Set the starting position of the background image.

    import Css.Background as Background

    {-- [ ("background-image", "url(\"smiley.gif\")")
       , ("background-position", "50px 100px")
       ] --}
    Background.image "smiley.gif"
    <| Background.position 50 100 []
-}
position : number -> number -> Styles -> Styles
position x y styles =
  Css.style "background-position" (pointString x y) styles


{-| Set the size of the background image

    import Css.Background as Background

    {-- [ ("background-image", "url(\"img_flwr.gif\")")
       , ("background-size", "80px 60px")
       ] --}
    Background.image "img_flwr.gif"
    <| Background.size 80 60 []
-}
size : number -> number -> Styles -> Styles
size width height styles =
  Css.style "background-size" (pointString width height) styles


{-| Set how the background repeats

    import Css.Background as Background

    {-- [ ("background-image", "url(\"img_flwr.gif\")")
       , ("background-size", "80px 60px")
       , ("background-repeat", "no-repeat")
       ] --}
    Background.image "img_flwr.gif"
    <| Background.size 80 60
    <| Background.repeat Background.NoRepeat []
-}
repeat : Repeat -> Styles -> Styles
repeat r styles =
  Css.style "background-repeat" (repeatString r) styles


{-| Set whether a background image is fixed
or scrolls with the rest of the page.

    import Css.Background as Background

    {-- [ ("background-image", "url(\"w3css.gif\")")
       , ("background-repeat", "no-repeat")
       , ("background-attachment", "fixed")
       ] --}
    Background.image "img_flwr.gif"
    <| Background.repeat Background.NoRepeat
    <| Background.attachment Background.Fixed []
-}
attachment : Attachment -> Styles -> Styles
attachment a styles =
  Css.style "background-attachment" (attachmentString a) styles