CSS Loading Local Background Image

Question

Folder StrucThis is so simple, but nothing is working for me. I am trying to have a background of a local picture I own. I have read a bunch of other sites, and no one is consistent. I have tried every combo of ../ or ./ or file/// or someone even said web/port_back. Half include "" within the () and half don't. Tried every combo with that. Cleared my cache data constantly just in case that has affected it.

My Image is located /Portfolio/port_back.JPG and My css is located /Portfolio/static/index_app/index.css

CSS:

body {
  background-image: url("../../port_back.jpg");
  /* background-repeat: no-repeat; */
  background-size: cover;
}

It will help us a lot if you share your folder structure to the project. Also, what bundler you use? — Rado
– Rado, Commented Aug 20, 2020 at 5:52
it depends - what is the size of your picture? is your server case sensitive? background of some other element may be overriding the color. do you have content inside body to get some width and height so that the background picture should be displayed — Waqas Raja
– Waqas Raja, Commented Aug 20, 2020 at 5:53
Waqas Raja - 877 x 433 px...Rayees AC - It says image not found in my terminal — 8bjs110
– 8bjs110, Commented Aug 20, 2020 at 8:43

Asaf · Accepted Answer · 2020-08-20 06:02:46Z

4

You should go 3 folders back, try:

background-image: url("../../../port_back.jpg");

answered Aug 20, 2020 at 6:02

Asaf

1,59211 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Loading Local Background Image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related