Background image not showing up in div?

Question

I have the following div:

<div class="soundscapeImgDiv"> </div>

In the CSS I try and set its background like so:

.soundscapeImgDiv {
  /* background-color: white; */
  background-image:url('images/testImg.png') no-repeat;
  background-size: 100%;

  width: 280px;
  height: 85%;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
}

but when I do no image shows up. If I just leave the color then the box shows up.

How can I fix this and make the image show up as the background?

Update:

I am currently getting

GET file:///images/testImg.png net::ERR_FILE_NOT_FOUND

In the terminal. For background-image:url('/images/testImg.png');

Please hit `F12` and see if there are any console errors. The most common cause of this is that the image is not loading & the page is throwing a `404 error`. If there is a `404 error`, please read more on [Relative Paths](https://www.w3schools.com/html/html_filepaths.asp) and ensure yours is correct. — EGC, Jan 13 '20 at 23:30
@Cempoalxóchitl the CSS file is inside a folder called CSS while the images folder is found at the same level as the CSS folder. — , Jan 13 '20 at 23:50
Add a picture of your folder structure so we can help further — Cempoalxóchitl, Jan 13 '20 at 23:51
@Cempoalxóchitl it worked!? I did that before and it did not work... — , Jan 14 '20 at 00:03

Cempoalxóchitl · Accepted Answer · 2020-01-14T00:29:21.847

1

Use the background-repeat property

explore.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/explore.css">
</head>
<body>
<div class="soundscapeImgDiv"></div>
</body>
</html>

explore.css:

div.soundscapeImgDiv {
  /* background-color: white; */
  background-image: url("../images/testImg.png");

  background-size: 100%;
  background-repeat: no-repeat;
  width: 280px;
  height: 85%;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
}

html, body {
  height: 100%;
}

Folder structure:

Triple check your folder structure:

file:///Users/username/Desktop/Portals.com/css/images/testImg.png

I believe you are aiming to have something like this: file:///Users/username/Desktop/Portals.com/images/testImg.png

See this working example

edited Jan 14 '20 at 00:29

answered Jan 13 '20 at 23:34

Cempoalxóchitl

176
3
15

I already do: background-image:url('images/testImg.png') no-repeat; – Jan 13 '20 at 23:36
Try: `background-image: url("./images/testImg.png");` – EGC Jan 13 '20 at 23:37
Remove the ```no-repeat``` part. Use the the ```background-repeat``` property instead or use ```background: url("images/testImg.png") no-repeat;``` – Cempoalxóchitl Jan 13 '20 at 23:41
@EGC GET file:///Users/username/Desktop/Portals.com/css/images/testImg.png net::ERR_FILE_NOT_FOUND – Jan 13 '20 at 23:42
you're missing a slash ```/``` ... try this ```background-image:url('/images/testImg.png');``` – Cempoalxóchitl Jan 13 '20 at 23:43
Okay.. well try this one: `background-image: url("../images/testImg.png");` – EGC Jan 13 '20 at 23:48
1

Or supply an image of your folder structure (where your image is & the HTML you're trying to reference it from) – EGC Jan 13 '20 at 23:48

A. Meshu · Answer 2 · 2020-01-14T00:09:42.693

This is because you are mixing the background-image property and the background repeat property.

If you want to declare both in one line use background property:

.soundscapeImgDiv {
  /* background-color: white; */
  background: url('https://picsum.photos/150/450') no-repeat;
  background-size: 100%;

  width: 280px;
  height: 85%;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
}

<div class="soundscapeImgDiv"> </div>

Make sure that there is an actual image on the path you provide: url('images/testImg.png') this line means that you truly got a file name testImg.png inside image folder on the same place where you excecute your html file.

score 1 · Answer 3 · answered Jan 13 '20 at 23:37

I think the no-repeat statement is messing with the code, try removing no-repeat or using:-

.soundscapeImgDiv {
/* background-color: white; */
background-image:url('images/testImg.png');
background-size: 100%;
background-repeat:no-repeat;
width: 280px;
height: 85%;
margin-left: 10px;
margin-top: 12px;
border-radius: 12px;
}

score 0 · Answer 4 · answered Jan 14 '20 at 00:03

The are two factors makes your image not working:

the property background-image doesn't accept no-repeat as a second parameter, you may use background shorthand property to pass url() no-repeat
the Percentage value of the height dosent work without explicitly declaring the height of body or html you may need to see this Q&A or replace it by vh,px it will work

score 0 · Answer 5 · answered Jan 14 '20 at 05:39

Your HTML, CSS and Image files are all located in different locations. Since your CSS file is located in a folder called CSS. When you use the path images/testImg.png, the css file is looking for a folder called images inside of the CSS folder. In Order to get onto the correct path you need to use .. to move up one folder. So when the CSS file runs and looks for the image, ../images/testImg.png, will move up and out of the CSS folder and then into the images folder.

Background image not showing up in div?

5 Answers5

The are two factors makes your image not working: