Fullscreen background img without parallax effect

What is the best solution in Quark to create a fullscreen image background with text on top. Just like the parallax modules but without the parallax effect. If I remove the “parallax bg” suffix in the modules advanced settings then the background image tiles on big screens.

I added a class suffix in the modules advanced settings linked to a background-size:cover css in the override to stop the background image to tile, but when I change the top margin position of the content text then it effects the padding of the background image.

Any advice on how to work around this and make it possible to position the content without affecting the padding of the background image?

Thanks

Could you please post an url to your site?

Thanks Cyberek, I managed to figured it out.

Could you please share the solution?

Sure!

To stops the background image from tiling on big desktop views I added this css in my override file linked to a “fullscreen” suffix in my modules advanced settings.

Code: Select all

.fullscreen {
    background-repeat:no-repeat;
    background-position:50% 50%;
    height:100%;
    background-size:cover;
    z-index:1;
}


When I change the margins of the text content on top of the background image it effects the padding of the background img. My only work around for this is to increase or decrease the padding of the background image once I’m done with the text margins. A little bit extra work but I got a feeling thats the only way to get around it.

Is there a better solution to keep the margins of the content idependant from the padding of the background image?

Thanks for sharing the idea.
If you have any additional questions regarding this topic, please let me know.