Lowest price ever! Learn Generative AI for 48% less!
Get my discount+ 3
Background-image not showing
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.
12 Answers
+ 5
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"/>
+ 3
Upload it in dropbox or drive extract the link and use it instead of img/fkk.png
+ 2
Ninety5 Are you trying on Sololearn
+ 1
Ninety5 Image path is wrong and please don't write inappropriate language anywhere.
+ 1
You have to only write background:url("path of image");
attributes not background-image
+ 1
background-image:url("parent-folder/child.format");
Ensure cases, spellings match.... Double quotes in parentheses ending with semicolon
0
AJ #Infinity Love thanks for the advice.
Please how do I make the image file relate to the CSS file?
0
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
0
AJ #Infinity Love
No Sir. On a mobile editor (ACode).
The folders are created on my mobile.
0
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.
0
Remove /img and Apply only ("fkk.png"); This will Work Perfectly
0
Seat
<style>
div{
background-image: url(img/fkk.png);
background-color: red;
Width:100%;
Height: 500px;
}
</style>