Website background image zoomed in and blurry

[skatingangels]

Hello,

I am trying to create a background image using either the Vast or Stratus template.  Every time I try to add a background image it appears zoomed in and blurry, with the sides of the image cut off. 

Any help would be very appreacited! Thank you.

Danielle

[Kevin-C · Accepted solution]

Hello Skatingangels,

After reviewing both themes, these modules with the background images have the background-size: property set to "cover". This tells the browser to assess the images dimentions, and stretch the image's shortest dimention to fit the frame (the module). For example we have a frame that is 1200px by 200px, and we have a background image that is 600 by 200. The browser check the image's width and height against the frame's width and height. It'll see that the height is fine, but not the width. So it will now scale the image proportionally to display at 1200px to 'cover' the entire frame. The rendered height of the image is now 400px but the frame is 200px high so the image will essentially be visually cropped and will not show the overflow.

Long story short: If its cropping the sides, your image is propbably taller than it is wide and you should be using a wider image (could be the same image with a different crop). If it's blurry it is being scaled quit a lot. See if you can find a larger image or version of the image to use.

Short story shorter: Use a bigger image with a ratio that closer resembles the display on the page.

I hope this helps.

[jennysowyrda]

Hi @skatingangels,

Can you please share a link to the page you're working on? Additionally, have you tried adding different size images to ensure the issue isn't due to the image source?

Thanks,
Jenny