Archived topic
Background image not fully visible
5 replies · Started by Michael on August 29, 2021
Hi there
On the home page I have added two backgrounds via a CSS class inside the container:
1) the blue stripes in the background of the header page hero. This is an SVG file.
2) the slogan "In for the win" with some people in the foreground. This is a PNG image.
As you can see, the slogan is not fully visible and cut off at the bottom so it is not possible to read everything.
I have managed to fix the background (blue stripes), to make them 100% width and height. The responsive behaviour is also fine, but unfortunately not yet for the slogan in the foreground.
Do you have any suggestions on how to achieve that?
Thanks in advance
Michael
Hi Michael,
The Container block containing your slogan has a background color value of #00455c. You should remove it so it doesn't block the background behind it. :D
Thanks for your reply Elvin.
However, this is not what I mean. The block with the title and button inside (with the background color) should remain as it is.
I mean the red slogan is not completely visible.
My goal is to have the red slogan visible completely with the skaters on it. Currently it is cut off at the bottom.
Do you know what I mean?
Thanks,
Michael
Ah I see.
This is pretty tricky to do.
I'd suggest setting the background size to contain or auto 100% instead of "cover" but I think it will still be cropped on some viewports.
But it's worth a try. Can you try using "contain" instead of "cover" for background size?
I used "contain" instead of "cover" and to me, that does the job pretty good.
Thanks a lot!
Nice one. Glad to be of any help. No problem. :D
