I'm having a problem setting background images. For some reason whenever I try to set the background image of a div, the image renders very blurry. Someone said to make the images 2x bigger but that didn't work. This also happens when I try to set a background image on the body. It also happens with videos. When I set a video to take the full width of the body, the video becomes blurry. Does anyone know why this might be happening. I've also tried setting the background-size to contain or cover instead of a percentage, but it still doesn't work. Any help would be appreciated.
here's an example of my code:
.container{
top: 5.2rem;
position: relative;
background-color: pink;
padding-bottom: 30rem;
width: 100%;
background-image: url(/images/portfolio-image6.jpg);
background-size: 100%;
background-position:center;
}