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');
5 answers
solution1
1 ACCPTED 2020-01-13 23:34:21
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
solution2
1 2020-01-13 23:37:08
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.
solution3
1 2020-01-13 23:37:19
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;
}
solution4
0 2020-01-14 00:03:57
The are two factors makes your image not working:
the property
background-imagedoesn't acceptno-repeatas a second parameter, you may usebackgroundshorthand property to passurl() no-repeatthe Percentage value of the height dosent work without explicitly declaring the height of
bodyorhtmlyou may need to see this Q&A or replace it byvh,pxit will work
solution5
0 2020-01-14 05:39:21
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.