Despite my familiarity with html/css, I am encountering an issue while experimenting with background-image:url(). Strangely, nothing seems to show up. My html is quite basic for testing purposes, and I have confirmed that my image path name is correct. Despite exhausting all my resources, I still cannot seem to make it work.
Here is the snippet of my html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
The corresponding CSS:
.pic {
background-image: url(/Users/leslienguyen/Desktop/bgBullet4.png);
background-size: cover;
}
I've already attempted using (-webkit-)background-size, background-attachment, and ensuring that all files are in the same location. Interestingly, the background sometimes appears when I specify a specific height in pixels, but fails to display with auto. I am truly at a loss here.
Any help would be greatly appreciated!