Background-image is not showing

[CodeingMAN]

When I try to put the original link for my background image it shows

 background-image: url("https://media.istockphoto.com/photos/programming-source-code-abstract-background-picture-id1047259374?k=6&m=1047259374&s=612x612&w=0&h=nG_krpdg_SonwCnxIOYShVLEidbLvukG9YrBUsRqVEQ=");

But when I do my file version it does not

 background-image: url("images/Background.PNG");

Maybe it is because the background can not do PNG or my resolution is not right because before the link was JPG all I did was use an image format converter for high quality.

Note I have tried images/Background.png lowercase instead of the upper case it did not work.

[jsdisco]

The image you linked is a jpg, you can’t convert it to png just by changing the file extension.

[CodeingMAN]

I used an online convorter

[jsdisco]

Yeah sorry just saw that you already mentioned it.

CSS background-image can be jpg, png, svg or whatever else format, so if the image is not showing, you might have the wrong image path. Can you post a screenshot of your folder structure showing where the .css file and the image are located?

[CodeingMAN]

oh. I JUST solved it I put the CSS in the HTML

<style>
 background-image: url("images/Background.PNG");
</style>

IT worked

[jsdisco]

Yes because you’ve the wrong path. If your .css file is not in the same folder as the index.html, you’d have to move out of the subfolder first:

background-image: url("../images/Background.PNG");

On a side note, it’s impossible to improve the quality of a jpg by converting it to png, the png will have the exact same image information as the jpg.