Background-image Quality?

Question

So I’m working towards building my portfolio website with HTML and CSS for now. Upon including a background-image of type jpg for my fullscreen landing page (taken from unpslash.com), the quality is very underwhelming versus the beautiful image on the site. Is there a way I can fix my image to scale with the size of the device and still retain initial image quality? Here are my background properties for the image so far...

Background-size: cover;
background-position: center;
height: 100vh;

Answer 1

You can set:
background:url('img.jpg');
height:100vh;
width:100%;
background-repeat:no-repeat;
background-size:cover;
overflow:hidden;

Answer 2

Tonmoy Santra Hey, I tried this set up and the width seemed to extend my page, creating a scroller at the bottom. The image remained low quality as well. I also tried width of 100vh, but that split the picture in half..