How to put background picture to phoenix html page?

Phoenix Forum Questions / Help
,
1

hey I am trying to set a picture as my background on my phoenix page, i put the picture into the assets folder, but how to display it and position it?
is it possible to set it globally for every page?

2

You might use CSS for this…

If You look at the source code of https://elixirconf.com/ You will see

.main-hero {
  background-image: url(/2018/images/resources/jose-2016-keynote-256cbc4….jpg?vsn=d);
  background-position: 10%;
  background-position-y: center;
}
.fc-fullpage {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
3

should i add this to my app.css?

1 Like
4

Yes, and tag html accordingly.

5

i just want to center an image and have it on the bottom of the page, should i put it on the body tag the css tags?

6

bottom of page? You should use a wrapper instead of body… any div with corresponding classes will do the trick.

7

By the way it is also possible to use img tag with src pointing to assets, but using a background image is different because You still can put text on.

8

when i put stuff into app.css it saves first and changes the contenct in it form a lot of comments to a lot of tags, and then it chnages back, and my classes are gone

9

Are You editing the app.css in priv/? Because You should not, this one is autogenerated.

But without more info, (Phoenix version, umbrella?, bundler in use) it’s hard to tell.

10

yeah that was the issue, found the normal css file, but it still doesnt show up:
added this to css:

.background {
  background-image: url("<%= static_path(@conn, "/images/backgroundsuperadmin.png") %>");
  background-position: 10%;
  background-position-y: center;
}

and a div wrapper inside the body with this class name

11

That is css, not eex. AFAIK You cannot use <%= %>

Instead, use the real path… You should check also that going to the url returns the image correctly.

12

full or relative?

13

Relative to your url.

14

i mean relative path to the css file, but does not seem to work

15

this:

.background {
  background-image: url("./../static/images/backgroundsuperadmin.png");
  background-position-y: center;
}

gives this error:

 ** (Phoenix.Router.NoRouteError) no route found for GET /static/images/backgroundsuperadmin.png (Userteam1Web.Router)
16

I said relative to your url, not the filesystem…

You need to check that the image is accessible from your web server…

That means going to localhost:4000/images/backgroundsuperadmin.png and check that the image is available.

1 Like
17

oh, it is available

18

So the path should be /images/backgroundsuperadmin.png

5 Likes