I'm trying to insert a photo on my page, I used the following information to put the photo:
background-image: url(../../Pictures/espacio.img);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
The result was not what I expected, the photo looks very pixelated , as it spread across the page.
What do I need to add to make the picture look good?
You must take into account that ... if the image is smaller than your screen and you use the property background-size: cover; What you do with it is to force the image to cover all the content or size where you are putting your image.
If you want that photo yes or yes, you have two options:
1) Create that same image in larger size that is equal to or greater than the size where it will be displayed, so it will stop pixelating
2) Reduce the size where you show the image and this is eliminating the property that you used background-size: cover; and you give a height and '' width 'to your image but of course, it will be as big as the image itself same be. We must never forget that the code modifies what you already have. If your image is small..grading it will always pixelate. Regards! =)