I am trying to make my background image responsive so that all of it shows on all screen sizes. https://necoem.org/upcoming-events/annual-conference-2020/
I am working in cornerstone and have my image size and position set to 100% 100%. But as I resize my screen I get either white space on top and bottom or worse some of the image gets cut off.
Can you please advise? Thank you.
Hello @kcostellomak,
Thanks for writing in!
The background position can be set to top center and background size should be 100% auto. And by the way, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
We use the background-image: cover; 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 helps.
Thank you @runel. What I would really like to see is the entire image showing in all browser sizes with no white space. The height of the section would need to change accordingly. Is that an option?
Update: I did it using the image element which gave me borders but I was able to work around it. Thanks.
Hey @kcostellomak,
It’s good to know that you have found a way to resolve your background image situation.
Best Regards.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.