Click here to Skip to main content
15,179,246 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
i tried to add a background-image but it not working
iam using the right code which is
div
{height:300px;
width:300px;
background-image: url('joe.png');}
joe.png is the name of the file and its in the same folder of css text editor
and in my html text i write the div element

What I have tried:

i make the height and width bigger to 1000px
also i tried to use background-repeat
but it not working
Posted
Updated 14-Jan-21 20:57pm
Comments
Richard Deeming 14-Jan-21 11:55am
   
Assuming the image really is in the same folder as your CSS file, the CSS looks correct. There must be something else going wrong, which we can't see.

Use your browser's developer tools to inspect the element and see if you can spot the problem.

1 solution

You didn't include your HTML code in your question. Here a sample code showing this.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height:300px;
  width:300px;
  background-image: url("https://www.w3schools.com/images/w3schoolscom_gray.gif");
}
</style>
</head>
<body>
<h1>DIV with Background Image</h1>
<div>
<p>This div has an image as the background!</p>
</div>
</body>
</html>

Use below URL to paste above code & see output.
W3schools - Tryit Editor v3.6[^]

In above sample, I have used absolute path to show you output. You need to use relative path for image.
Quote:
joe.png is the name of the file and its in the same folder of css text editor
This part might be the issue. background-image: url('joe.png'); will work only if the HTML page(not CSS text editor) there in same path.

Check below pages for learning about File paths & update your code
HTML File Paths[^]
Quote:

<img src="picture.jpg"> - The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg"> - The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg"> - The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg"> - The "picture.jpg" file is located in the folder one level up from the current folder
Quick Reminder About File Paths | CSS-Tricks[^]
   
Comments
Richard Deeming 15-Jan-21 4:19am
   
"only if the HTML page(not CSS text editor) there in same path"
Paths in a CSS file are resolved relative to the CSS file, not the HTML page that references the CSS file. :)
thatraja 15-Jan-21 4:31am
   
Frankly I meant code(where css code in same HTML file) from my question. Without seeing OP's complete code, it's mostly puzzle sometime. Anyway those 2 links are enough for him to solve the issue.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900