Background-image not showing

Question

Just started learning html and Css, so I experiment along as i learn. Today i stumbled upon background -image and background-color, so I decided to try it out. Below is the code I tried out.
style>
div {
background-image: url ("img/fkk.png");

}

</style>

Now that code above does not work, so i decided to add background-color to it to see if the problem was from somewhere else. Code below.

style>
div {
background-image: url "img/fkk.png";

background-color: gray;
}

</style>

Now, here, the color worked but the image still does not work, even if i remove the background-color property.

The image folder is correct cause I tried it out on the page with the <img> tag and it appeared.

So what could be the problem?

Thanks for your time.

Answer 1

Ninety5

If image is with Html file then path should be <img src = "abc.jpg"/>

if image is in another folder and that folder is with Html file then path should be
<img src = "folder/abc.jpg"/>

if image is in another folder and Html file is in another folder but both folder are in same folder then image path will be
<img src = "../folder/abc.jpg"/>

Answer 2

Upload it in dropbox or drive extract the link and use it instead of img/fkk.png

Answer 3

Ninety5 Are you trying on Sololearn

Answer 4

Ninety5 Image path is wrong and please don't write inappropriate language anywhere.

Answer 5

You have to only write background:url("path of image");

attributes not background-image

Answer 6

background-image:url("parent-folder/child.format");

Ensure cases, spellings match.... Double quotes in parentheses ending with semicolon

Answer 7

AJ #Infinity Love thanks for the advice.

Please how do I make the image file relate to the CSS file?

Answer 8

Dheeraj Sharma 🇮🇳 the image folder is in the same folder as the .html file and the folder that houses the folder that houses the CSS file.

Like this.

|-image folder/image
Folder- - |-.html file
|-folder/folder/.css file

Answer 9

AJ #Infinity Love
No Sir. On a mobile editor (ACode).

The folders are created on my mobile.

Answer 10

AJ #Infinity Love
Yes, that works for adding the image to the html page, but when i try to make it my background-image either through embedded css or external css, the image does not appear as my background-image.

Answer 11

Remove /img and Apply only ("fkk.png"); This will Work Perfectly

Answer 12

Seat
<style>
div{
background-image: url(img/fkk.png);
background-color: red;
Width:100%;
Height: 500px;
}
</style>