Displaying fullpage GIFs

Learn
1

I’m new to Elm, developing an app similar to this example. It’s supposed to display a random GIF fullpage, i.e.filling the viewport completely. What is the most common way to do this, using rtfeldman/elm-css?

2

That’s more a question about CSS than Elm, but something like this should do it:

[ backgroundImage yourImage
, backgroundSize cover
, backgroundPosition center
]

MDN is a good resource for CSS:

1 Like
3

Nevertheless, I need to resize my div accordingly, right?

4

No, this is certainly just a css property.
If I take the JSON example file you discuss above, I’d to something like this:

.fullscreen {
    position: absolute;
    z-index: -5;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    top: 0;
    left: 0;
}

...
    Success url ->
      div []
        [ button [ onClick MorePlease, style "display" "block" ] [ text "More Please!" ]
        , img [ class "fullscreen", src url ] []
        ]

See the result

Edit: Your final question can be interperted two ways, so if you mean How do I do this in elm-css?, then do the same, but typesafe:

import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)

...
    Success url ->
      div []
        [ button [ onClick MorePlease, style "display" "block" ] [ text "More Please!" ]
        , img [ css [ position absolute
                    , zIndex (int -5)
                    , width (vw 100)
                    , height (vh 100)
                    , margin (px 0)
                    , top (px 0)
                    , left (px 0)
                    ], src url ] []
        ]
5

So you would define an external stylesheet?
(I’m familiar with your approach, but somehow wanted to solve it in one Elm-file without having an extram HTML or CSS file. :smiley:)

6

You can certainly do it inline (I’ve updated my post to suggest how). I’m personally not a fan of inline styles, that’s all.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.