I've encountered an issue while trying to set a background image for a div. Some images display correctly, while others do not.
I attempted various methods such as directly specifying the image path in the background-image property in CSS, importing the image into my JSX file and then assigning it as the background image. What's strange is that some images show up fine, but others don't appear at all. Initially, I suspected that it might be related to file size or extension, but after testing two images with identical resolution, both in jpg format, and nearly the same file size, one worked while the other did not. Can anyone shed light on why this inconsistency occurs and provide a solution?
CSS
.features-container {
background-image: linear-gradient(
to right bottom,
rgba(57, 62, 70, 0.6),
rgba(34, 40, 49, 0.6)
),
url("../assets/ads2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
I have two jpg images in my assets folder
https://i.sstatic.net/zaaEy.png
Both images are 1920 x 1080 in resolution. The first image has a file size of 598kb, while the second one is 531kb.
However, when I change the URL in the above CSS code to
url("../assets/ads1.jpg")