Hi,
Is it possible to use a background across multiple blocs?
For example, I currently have a structure 1 column bloc and a navigation bloc above it. The structure 1 column bloc has a background set, but I also want the background to stretch to the bloc above it.
Of course, I can just set the background for both blocs to the same image, but then the images aren’t aligned, I want the same image stretched across both the blocs.
Set both background images to parallax. This will cause the page content to roll over the background images. You can do this for every bloc on a page if you want to have a constant background image for the full length of the page.
Thanks but it seems like that doesn’t actually work with the navigation bloc. I just end up with a white background with the Parallax setting enabled when I use the view in browser function, yet it shows up correctly in the app.
I just tried by putting a navigation bloc in the top global area and set the background to parallax and it works just fine. It maybe that you’ve set the navigation block to be sticky, this will cause a problem. One way to solve this is to use a hero bloc that contains the navigation. You can then set the background of the hero to parallax. This will cause the navigation to become white when it comes into view, but you can change the colour to transparent, or semi transparent. Just select the hero block and set the background colour to be transparent. Do this by selecting the background colour in the right properties panel. Create a swatch and set it to any colour you like, then adjust the opacity slider to make it transparent.
If you also want to get rid of the bottom shadow on the sticky nav bar, open the class manager and add a class called .sticky-nav.sticky. Then edit the class and select the shadow tab. Choose box shadow and again, reduce the opacity of the shadow colour:
Here is an example bloc file.
navigationBG.bloc (1.4 MB)
I’m not using a sticky nav. Here’s some pictures of what i’m seeing:
https://imgur.com/a/uNqDWMF
I’ve made sure I’m on the latest blocs version. This is both when using the view function in the app and after exporting.
I have no idea why it’s doing that. If you’re saying that the white bar shows in a browser window but not in the project, Then maybe the page isn’t outputting correctly. I would shut down the project, close blocs then reopen everything. I’ve attached another bloc file for you to try. This one just has a navigation bar in the top global area and it seems to display just fine in my browsers. Open it up and try previewing to see what effect you’re getting. If my example works, there is nothing to suggest that it’s a problem with blocs, but is more likely to be something wrong with the project file and it’s settings. Maybe you would like to post your project file so we can take a look.
navigationBG2.bloc (1.4 MB)
