Background image Rendering Incorrectly for Tablets and Phone

Charles Gambetta

• December 08, 2020 21:30

I build a fairly simple one-page website. It's essentially a poster with an image slider. To create the page, I used the same background image for all blocks. Everything looks good for desktop but when I view for tablets and phones, the background image does not render properly. Looking at the page, you'll see the upper and lower portions of the page render the image much smaller than the middle block that includes the text below the image. If this is a bug, please let me  know when it will be resolved. If it is not a bug, please tell me what I need to change to make the background image render consistently. Here's the page URL: http://www.masteringconcertos.com

Thank you for your kind assistance.

Charles Gambetta

0

• 

  Sandra Prunici

  • December 09, 2020 12:46

  Hi Charles,

  Thank you for the URL link. I checked it and the inconvenience you reported. This isn't a bug but a design inconvenience. This happened because in the desktop mode all blocks have mostly the same height and therefore the background image is looking fine for all blocks. In tablet and mobile mode, the 1st, 2nd and last blocks are approximatively equal but the 3rd one is longer and higher, therefore the background image will zoom to fit perfectly in the background. This is normal behaviour. The block height in the mobile and tablet mode can't be customized and it depends on the content volume you have on the block.

  Best regards,
  Sandra

  0
• 

  Charles Gambetta

  • December 09, 2020 18:59

  Thank you for the speedy response. What If I cropped the background image so it more closely conforms to the size of the blocks with less content? Alternatively can I change this behavior with CSS?

  0
• 

  Charles Gambetta

  • December 09, 2020 19:02

  One more quick question... When you view the page on a phone, the bottom of the page renders all blurry. Is this behavior part of the same issue, and my suggested remedies correct this blurred effect? Thanks!

  0
• 

  Sandra Prunici

  • December 10, 2020 14:31

  Hi Charles,

  I'm not sure if you will crop the image it will be displayed better on the mobile and tablet mode because in these modes the image is zoomed to fit on the entire block height. The solution can be adding a bigger image in the tablet and mobile mode. Unfortunately, isn't possible to change this behaviour with the CSS.

  Regarding this "When you view the page on a phone, the bottom of the page renders all blurry. Is this behavior part of the same issue, and my suggested remedies correct this blurred effect?" - I checked the page on my mobile phone and I didn't find some inconveniences in the bottom part of the page. See here. Could you please give us more details?

  Best regards,
  Sandra

  0

Please sign in to leave a comment.