Hi,
I’m trying to set up a full screen background image that fills the entire browser window without distortion. All content, including the navbar, headings and text, needs to sit on top of the image.
I’ve tried using the Background component with every combination of settings but can’t get it to behave consistently across desktop and mobile.
I’ve tried to achieve this with a container and the background component with no joy.
Cheers,
John
Just add the image to the background of a Container, like this…
Great, thanks Dan.
Will this work with dynamic content?
If I’m pulling data from a database and the page might only have a couple of lines of text, will it still display a full page background image?
Hope that makes sense.
I’d like to suggest a method to extend the background even if the content is positioned smaller than the page height.
This solution maintains the normal CONTAINER behavior and works (in my experience) better than the Content Layout/Height/Screen option.
I’m not sure if this is what you’re looking for but you can try
Great, thanks! 
I’m happy to help, let me know if it works for you
Just playing around with this now. Is there a way to make the background image fixed so it doesn’t scroll with the content?
You can use the dedicated elementBackground
try this free project I made
an alternative, using a fixed container (which contains nothing else) and is underneath everything.
Hi @johnhiggins
depends what you are using to create a background. There are 2 usual ways, the one is with a container and the other one is with the background component.
For the background component there is an option “Background Fixed” like in the screenshot below. Enable this setting and your background fills the screen and stays fixed.
As far as I know you do not have this possibility with the Container component.
all containers not sure if this what you mean, probably Michelangelo’s suggestion
