Background image in custom class not showing

So, I’ve created a custom class with a height of 300px and a background image and applied that to a row. Shows perfectly in edit mode. Inside that row is a column, inside the column a h2 with some text, set to vertically align to the center. That too is showing perfect in edit mode.

However, when I switch to preview (in blocs or in browser, doesn’t matter), it shows the vertically centred h2, but no background image.

What am I doing wrong? Blocs is really giving me a hard time doing pretty basic stuff sighs

Can you confirm where you placed the image? when making the browser smaller the image appears?

Captura de Pantalla 2020-08-20 a la(s) 10.30.02 a. m.

remember that if you configure, at a lower point it will not appear at a higher point !, it happened to me that I placed an adjustment in MD and then it is not displayed in LG, it could be that

No, the image does not appear on either breakpoint. I placed it when I had the xl breakpoint active.

if you had a live site you could review the code, or if you attach the file only with that section to review, I really think it is a very rare anomaly

Yeah, it’s odd. I created a new document, did the same row - col - row - col - h2 and this time it works. I‘d still like to figure out why it’s not working in the original document.

I‘ll see if I can see anything in the code inspector (works in preview, so don’t need the site hosted) when get home. I’ll post the project here, if I fail :relieved:

Right, I have no idea why that happens, but when I check the exported files, I don’t see the images, that I’ve added as local assets to my project. In the exported /img folder I see the lazy load and page load images, and the logo. I have added 3 more pictures (one of them is the background image, I use in the .topbox class). None of them gets exported.

As soon as I add the background image manually to the folder, it works.

I can confirm, that this also happens when I create a new project. The image, added as bg-image to a class, does not get exported. Didn’t add more than the needed image this time though.

Any ideas? @Norm

Ok, I narrowed the issue further down. It works when I use the built in images in blocs. They do get exported. Any asset I add (other than the logo… dunno why), doesn’t get exported.

I’m using the current version of Blocs (3.5.3). Can anyone confirm this issue, or is it just me? It’s driving me nuts. @Norm?

Are you using iCloud ? And are the images local or has iCloud put them remote only?

Does this happen with a new project?

Hey Pete,

no cloud. I added local images. Tried both settings, embedded and not embedded. And it happens to a new project.

I can replicate the issue pretty easily. That’s why I asked if it’s just me or if others can replicate this issue as well.

Well worth submitting a bug report then. Send a video or a project with the issue if possible.

1 Like

Blocs changed it’s mind. Before submitting a bug I thought to myself, hey, might as well delete blocs and install anew. Now it works. My custom class shows the background I added from my imported assets. No idea what magic uninstall / re-install did, but it works now.

2 Likes

Weird! Great you got it sorted.

sigh

I wish. It just happend again @Norm. And I’m not keen to uninstall / reinstall Blocs every time this happens, just to have it working again. I’ll sure file a bug report toot his time.

Before it happened, I removed a class from the classes field on the right, that I toyed around with to see how I can work with background image using a class on different elements like blocs and rows. The content that that class was applied to didn’t change though. It kept showing the background image, that was applied to the class that I just removed.

I had to delete the class completely using the class manager. Only then the change happened to the content. After that, using images from the project assets didn’t work anymore when added to a class. Only the built in images were showing again.

Adding a background image from the project assets to the bloc itself works though. As does adding an image from the project assets that’s already being used in another class. I also notice, that in the “other” class I can see a thumbnail of the image, whilst I cannot see it in the class that gives me the issues. That’s all so weird…

I now added the image to the blocs background using the right sidebar options. I’m still confused about what’s the best practice in this case.

This happens to me quite often! You can always delete the class, close blocs, then reopen and redo the class, it will work.

1 Like

Kinda “happy” to hear, I’m not alone with this issue. Was already thinking I’m going to become crazy :wink: I’ll see if that solves my issue. So far, I can achieve what I want by adding the background image to the bloc itself and apply just a class with max width or margin left/right to the bloc. Works for me.