Ask coding questions

← Back to all posts
Local images not displaying
KenanWright (2)

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 (5221) [earned 5 cycles]
View Answer
Comments
hotnewtop
SixBeeps (5221)

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.

KenanWright (2)

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

SixBeeps (5221)

@KenanWright Ahh, I found the problem

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

KenanWright (2)

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

InvisibleOne (2990)

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

<img src='your image.png'/>
KenanWright (2)

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

InvisibleOne (2990)

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

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

@KenanWright

KenanWright (2)

@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');

InvisibleOne (2990)

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

KenanWright (2)

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

<div class="imagetest"></div>

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

InvisibleOne (2990)

You are still using background, use background-image @KenanWright

InvisibleOne (2990)

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

InvisibleOne (2990)

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

PattanAhmed (1406)

@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

Coder100 (18207)

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.

KenanWright (2)

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

Bookie0 (6293)

can you link your repl? thanks!

Bookie0 (6293)

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

KenanWright (2)

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

Bookie0 (6293)

sure,

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