How to put background picture to phoenix html page?

phoenix
phoenix_html

#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?


#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.


#17

oh, it is available


#18

So the path should be /images/backgroundsuperadmin.png