I just started with bootstrap studio yesterday and tried to do some basic things and have an anomaly. I initially create a container and the software says “empty container (which is fine)”. Then I add a background image to the container. The image seems like it gets uploaded but… the box saying empty container is still sitting there in front of the image. I know the image is there because when i go to preview on my local loopback http://127.0.0.1:8000/ in the browser, it displays fine.
First and formost, update your app, it’s up to 5.4.2 at this point so you are quite a bit behind. Not sure that will fix your issue, but you should update either way.
Next, upload your site so we can see it, it’s hard to know exactly what is going on without seeing the code or having access to the BSS project file.
It does not make sense to me either why when a background image added to a div with the container class still shows the Empty Container placeholder. I would consider this a bug.
Unfortunately this is by design. We show these “Empty X” labels on elements as an aid for beginners. Otherwise when they drop a Container, Row or Column they wouldn’t see anything because these elements don’t have a height by default.
As a workaround you can place an empty Div in your existing Container.
How about a disable placeholder image switch on the container ? Only reason I ask is that other programs I have used seem to have figured it out when adding a gradient or background image and they are using the placeholder image to begin with also.
It makes for a poor visual design experience but thats only my opinion and honestly I did not do a search so I am sure its been discussed before.
Martin, I am a beginner, and I ran into the problem the OTHER way, but I get what you are saying. The “feature” was done by design. I did what you said and added a
. The only issue with the
is that it seems to be 0 height, so it took a while to make some height to could see the “background image on the div that is inside a container”.
Personally, I don’t like it though. Maybe it may be more meaningful to have that “checkered board” in the background when its empty. The same checker board that people use for transparent.
Either way, thanks for the responses.
Because you were so quick to reply… maybe that may be the answer, the forum will step in to just say that it is not a bug.
Yes it is the expected behavior and not a bug. A container in Bootstrap has 0px default height. If content is added to a container, the container will become the height of the content. Typically, a background is not considered content, rather styling. So you would have to add a div as Martin suggested if you are using this for whatever purpose.
Just use a div in the first place and set the same css a container has also…
