I am facing an issue with a JPG image that I am attempting to use in CSS as a background-image for a div container. For some reason, this particular image refuses to render in the viewport. Interestingly, when I inspect the element, I can see its thumbnail when hovering over the URL.
I have tried various solutions such as:
- Placing it in an img tag with fixed height/width
- Converting it to PNG and SVG formats
- Compressing the image
- Stripping away metadata
- Using it in a different HTML/CSS file
import image from "./image.jpg";
//using React.js
<img src={image} className="image"/>//<-- doesnt work in img as src
<div className="imageBg"></div> //<-- doesnt work in div as bg.image {
height: 100px;
width: 100px;
}
.imageBg {
height: 100px;
width: 100px;
background-image: url("./image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}Here's the problem image: (a 2000x2000 729KB .jpg mockup edited in photoshop)
https://i.sstatic.net/LGYHM.jpg
https://i.sstatic.net/TKIw2.png
Could there be an issue with this specific image?