CSS “background-image” not showing in IE8 and below
Question
No matter what I do I cannot get the background-image property to work correctly in IE8.
I've even stripped everything down to the bare minimum and just have a functioning HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Fritz PT!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="myClass">
</div>
</body>
</html>
with the CSS for the class as follows:
.myClass {
background-image: url(/images/header_image_fallback.gif);
height: 300px;
width: 300px;
}
but still nothing is showing up in IE8 and lower.
I have tried multiple image formats (.gif, .jpg, .png), putting quotes around the folder path ('/images/header_image_fallback.gif') and then HTML. Does IE8 not support the background-image property? If it makes a difference I'm currently testing this out in VirtualBox.
1 answers
solution1
0 ACCPTED 2015-09-21 15:23:54
Okay, if anyone else is having the same problem as me I found the issue. Apparently, even though the syntax works in all modern browsers, you need to make sure you have the ../ for the folder path for IE. So in my original code (which works in modern browsers) I had the folder path as seen above /images/header_image_fallback.gif however, for IE I would need to do this ../images/header_image_fallback.gif. My images folder is up a directory from my css file and I suppose that matters for IE as opposed to modern browsers
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.