Responsive background images

Hello! I trust you’re doing well.

I need my background images to be fully responsive… Do I need to add them as a background image for a row or is it better to add them using the image element on a row? If so, should I use the “classic image” element or the “image” one?

What width should I use for such images? Please see the link on the private note.

Thanks for the help!!

Hi @Jacko_Pinto,

Thank you for writing in, since you embedded the text on those images, It would be better to add those images as Image element. Classic Image will work too but Image is the recommended.

A high quality image with aspect ratio of 16:9 pixel is an ideal size of a hero image (e.g 1200 x 675px, 1600 x 900px, 1920 x 1080px).

Cheers!

Thank you very much for your reply.

The ones on the link I shared are 1800 × 784 px… but they look “cut-off” (on the right hand side) on large desktop screens.

If I make them 1920 x 1080 px. would that be fixed? Anything else I need to make sure they use all of the screen space available?

Thanks!

Hi @Jacko_Pinto,

I checked the website in question and the images are showing fine. If you are talking about the cup image being cut off, it is what the image uploaded already on WordPress.

If you mean another point please get back to us with more detailed information and screenshot to be able to follow up.

Thank you.

Thank you Christopher.

Please see the attached screenshot… this is from an iMac with a 21" screen… you’ll notice how the images seem “not wide enough”, that’s why I’m wondering if I need to make the images larger or if I need to change any of the settings. On smaller screens the images fill up all the space, but not on larger ones.

Can you please help?

Hey @Jacko_Pinto,

Please increase your image size to 1920 px in width or double that if you support 4k display.

Hope that helps.

Thank you very much Christian.

I will do that.

Kind regards.

Thank you @Jacko_Pinto.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.