Background Header (picture pixelated

  • Hi,

    I am trying to figure out how to make a photo that I have for a background, behind the logo (your health, your choice) and I cant figure out how to get it so it is not so pixelated.

    any idea?

    website: https://yourhealthchoices.ca

    Thank you very much!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Your CSS shows that you are using the COVER option for background-size. This is why your image is pixelating.

    The image is 1920 pixels wide which is more than wide enough but the actual height of the image is only 282 pixels high. The heigh of the element you are covering is 501 pixels high. Your browser is, in effect, zooming in on the image to double it’s height thus making your image pixelated.

    I would keep the width of the image at 1920 but create the image with the height of 500 so it fills the box properly. You can then remove the COVER option for background-size from your CSS. If you are using Photoshop, export the file as a web ready photo using the JPG format at it’s highest setting.

    Thread Starter sowing

    (@sowing)

    thank you very much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Header (picture pixelated’ is closed to new replies.