How to set an image at the bottom of the page?

Asked

Viewed 486 times

2

I’m trying to run my project with a background image as follows:

The image is in the way:
webapp/Resources/libimagens/bg.png

The CSS file is in the way:
webapp/Resources/libcss/style.css

Inside the tag body{} in the CSS I’ve done the way below, but it didn’t work.

background-image: url(../libimagens/bg.png)

I thank those who have solution.

css background

  • I think you made a mistake writing the path to the CSS file :P

  • 1

    Sorry, I really typed wrong. the correct CSS path is: "webapp/Resources/libcss/css style.css" - I’ve already edited.

  • No problem with CSS. You are calling the CSS file on the html page that will use it?

2 answers

2

Use ../, should be working, try using quotes this way:

background-image: url("../libimagens/bg.png"), I believe it will solve.

But another very simple solution is to use the absolute path to the image, for example:

background-image: url(http://www.urldoseusite.com/libimagens/bg.png)

  • Actually this is indifferent, both ways (with or without the use of quotes) work, it is just a matter of preferences. Yeah, that way should be working.

  • @Lucas Muller, I tried tbm with quotation marks and with the full path this way. url(/webapp/resources/libimagens/bg.png);, I only didn’t use the website link because it’s not yet in production. I found, however, the solution using EL inside the url worked: body{
 background-image: url("#{resource['libimagens/bg.png']}");
 } Stach: http://stackoverflow.com/questions/6925733/how-to-reference-jsf-image-resource-as-css-background-image-url/6926193#6926193 .

2

If the CSS file is in the path:
webapp/resources/styles.css

And the image is in the way:
webapp/resources/libimagens/bg.png

The right way to the property background-image will be:

background-image: url(libimagens/bg.png);

When using - background-image: url(../libimagens/bg.png), you’re going back a briefcase.

The ways:

  • Starting with "/" returns to the root directory and starts from there
  • Starting with "../" back a directory back and start from there
  • Starting with "../../" back two directories back and start from there
  • (and so on ...)
  • To advance/move forward, just start with the first subdirectory and move on
    (background-image: url(libimagens/bg.png);)

more info

  • I had already used it this way, but it hadn’t worked. So I saw in another post that I should use ".. /" to return a directory, because for me this would apply, since the image is in another folder immediately prior. I use the Resource directory to call its contents as library in JSF. There is another way?

  • @Luiz , well this is strange! Because then it should be working. Have you uploaded the image to this directory? Also check if there is no typo in the path to the image. At the end of having done and checked this and the image still doesn’t work, use the absolute path to the image, which should be something like - background-image: url(/webapp/resources/libimagens/bg.png);, assuming that webapp is the root folder.

Browser other questions tagged css background

You are not signed in. Login or sign up in order to post.