Is there a creative way to customize the background of a page with an image? I know that you can use a BG image in a custom container, but sometimes I have multiple custom containers on a page, and I’d like the entire BG to be something other than dark/light/accent.
CSS for this?
.backg {
position: sticky !important;
top:0px;
width:100%;
height: 100vh;
margin-top:-90%;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkyq5M9l9X5QDHKbR1Pv78y0NTOydF-M9PWg&s');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
2 Likes
Thank you, i’ll give it a try!
1 Like
here is the explanation from the source of that code. @Himaladin
3 Likes
You have to add a component to the screen and name its CSS class “backg”.
Then make sure you turn this on.
Make sure you use an image with enough quality for both mobile & desktop devices.
3 Likes
I really appreciate your help. It mostly worked, but the BG is now pushing the elements down when viewed in a mobile. Is this fixable?
This has been discussed in the thread provided by @Sekayi_Liburd, if you scroll to the end of the thread. Just change your margin-top to -100vh
4 Likes
it looks great!
2 Likes
I think the margin-top size should be reduced by the height of the top bar by about 14px, so it becomes: margin-top:calc(-100vh + 14px);. Please adjust it yourself.
2 Likes