Background image stretches

Support
#1

Hi there. I have a question about a section background image I placed in the last section of this page: http://wordpress-100914-329432.cloudwaysapps.com/

Notice how the image I used (http://wordpress-100914-329432.cloudwaysapps.com/wp-content/uploads/2017/09/photo4.png) has plenty of space. However, when rendered, it looks like the image is stretched instead of fitting within the container’s widths, thereby making the image blurry. Is there a reason why this is happening / is there a way to correct this?

Thanks

#2

Hello There,

Thanks for writing in! I can see that you are using 1024x683 pixels image as your background. You must understand first how background images works. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In the section, we use the background-image: cover; by default which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this explains the background image property briefly. Thank you for your understanding.