Header image pixelated

Hi, there I’m new here and I’m trying to complete the tribute project. There are at least a gazillion things wrong with my page but for now I’ll just focus on my header picture. To put you into context, I found a picture I liked online and uploaded it in Cloudinary and from there I uploaded it onto my project but when I resize or click on live view, the image is overly pixelated. Is there something I can do about this? I’m sure the best option is to change the image but won’t I just always have the same problem if I take images online? What should I do? I keep seeing other codepens with big images and they are not pixelated.
Thank you! :wink:

If the original size of the image would only take up half the screen available, then if you stretch the image out to fill the header (which I assume is the width of the screen), then you probably will have a pixelated image. Try to find an image which is larger has a width of least 1920 pixels and height of 1040 pixels. That should take care of 99% of the large monitors resolutions. Be careful to check file size (# of KiloBytes) of the image too. I typically try to keep my individual images to no larger than 250 KB.

1 Like

Thank you for the quick answer, I’ll try that! :wink: