Hello,
I have created a portal page. This page is from a background image and text that lies above it.
I have set the following:
Background Lower Layer
Size & Position 100% 100% center
The picture is distorted. The background image should be displayed correctly on all devices. The page should also fill the screen.
Thanks and Greetings
Thomas
Hello @riwaro,
Thanks for writing in!
The most common settings for the section background is this:
Background Lower Layer
Size & Position: cover center
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 very much
Thomas
You are most welcome!
Hello,
I have now reduced the size of the lady and released the background. size & position 920 px auto right
Thomas
Awesome.
It’s good to know that you have figured it out a way to correct the said issue.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.