The image at the top of the home page appears to be zoomed in or cropped. The image is 1000 x 476 and the edges are cut off. I am not in any way a web developer and I’m just a volunteer. How can I fix this? Thanks.
Hi @GLCJoliet,
Thank you for writing in, no it was not cropped, its just the content band does not have enough height to showcase the entire background-image.
Two things you can do to resolve this, first is to add that banner as an Images element (not an Background-image). Image elements are responsive so you’ll sure that your image will fit on its container on all screen size, the downside of this is you’ll lose the parallax effect (background-image effect).
The other thing you can do is adjust the content band’s top and bottom padding from 13% up to 18%, this will give your content band enough height to show the Background-image.
If you just starting to build the pages, I encourage you to build the pages in the native Cornerstone Content Builder.
Hope it helps,
Cheers!
Is there another way to do it too?
Increasing the padding doesn’t help and I really want to have the parallax effect.
Maybe type something in the fields ‘Size & Position’? When I remove the ‘cover’ and ‘center’ text in those fields, the image changes a bit.
Hello Emi,
I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
By default, 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.
Feel free to change ‘cover’ to ‘contain’ and see the result.
1 Like
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.