Skip to content
Sign upLog in
← Back to Community

Local images not displaying

Profile icon
KenanWright

Hi everyone

I have uploaded the image I wish to use and copied the link from my replit folder but the image wont show up, what am i missing? Linked images from the web work but not the local ones.

thanks in advance!

Answered by SixBeeps [earned 5 cycles]
View Answer
Voters
Profile icon
sadiedog10
Profile icon
emcardle441
Profile icon
JethroAldave
Profile icon
KenanWright
Comments
hotnewtop
Profile icon
SixBeeps

When using the URL function in CSS, it'll look in the same folder the CSS file is in by default. You'll want to either get rid of the CSS folder and have the file in the root, or put the image in the same folder. Another option would be to mess around with URL formatting, but I can't remember exactly what needs to be done for that.

Profile icon
KenanWright

@SixBeeps
Just tried moving the image to the css folder and it didnt work. Sorry for being n00b :)

Profile icon
SixBeeps

@KenanWright
Ahh, I found the problem
image

Nothing shows up because the element is 0px high. Try giving it a height property.

Profile icon
KenanWright

@SixBeeps
You got it!!!! Thanks so much it worked!!! Really appreciate it!

Profile icon
SixBeeps

@KenanWright
Any time :)

Profile icon
InvisibleOne

Just upload the image to the repl folder. Then use the image tag

<img src='your image.png'/>
Profile icon
KenanWright

@BrownieBoi
ok thanks it works like that but im trying to use it via the background image css property, any idea why it wont work like that?

Profile icon
InvisibleOne

Oh, I see, you can't use the background tag, it doesn't work. Instead use:

background-image: src('header-background.jpg');

@KenanWright

Profile icon
KenanWright

@BrownieBoi
I tried that but still no luck, any ideas why its just css not displaying? i have a div targeted by its own class and in the .class i have the background-image: src('header-background.jpg');

Profile icon
InvisibleOne

Oh, that is my bad, use url instead of src

@KenanWright

Profile icon
KenanWright

@BrownieBoi
Thanks but url still not working, my exact code:
HTML:

css external file:
.imagetest{
background-image: url("header-background.jpg");
}

Profile icon
InvisibleOne

You are still using background, use background-image

@KenanWright

Profile icon
KenanWright

@BrownieBoi
just tried and nothing

Profile icon
InvisibleOne

Hmm, I'll fork your repl and have a look

@KenanWright

Profile icon
KenanWright

@BrownieBoi
amazing thanks :)

Profile icon
InvisibleOne

Ok, I think I figured it out. Your id tag on your navigation links is messing up the class tag. So set the background image in the #nav-links li code in the css

@KenanWright

Profile icon
PattanAhmed

@KenanWright
Hi,
This website might help you:-
Click here

(or)
The Second case can be that the High Pixels of the picture is 0... Try by increasing it
Thanks!

Hope this helps
Please mark my answer if this helps

Profile icon
Coder100

Hi, seems like your question has been answered, but as a side note:

.imagetest { height: 100vh; background: url("header-background.jpg"); }

now the div will have the height of the full page.

Profile icon
KenanWright

@Coder100
you just answered my next question! Legend! thank you so much!!!

Profile icon
Coder100

no problem :DD

@KenanWright

Profile icon
Bookie0

can you link your repl? thanks!

Profile icon
KenanWright

@Bookie0
sure https://repl.it/@KenanWright/TAW-Projects#index.html

Profile icon
Bookie0

ok well to insert images in HTML just do:

<img src="imageLink">

in your case i think you want:

<img src="header-background.jpg">

is this what you want?

@KenanWright

Profile icon
KenanWright

@Bookie0
thanks bookie however I am trying to use it through CSS instead of HTML. i have a div targeted by its own class and in the .class i have the background-image: src('header-background.jpg'); but CSS just wont display the image.

Profile icon
Bookie0

hum, not sure, but this might interest you: https://stackoverflow.com/questions/19204674/how-do-i-display-an-image-via-css-in-my-local-environment

@KenanWright

Profile icon
KenanWright

@Bookie0
many thanks :)

Profile icon
Bookie0

sure,

please mark this answer as correct if it helped! =)

@KenanWright