I want to have a banner with text… the problem is, the banner cuts off the image I am using. No matter how I resize the picture, the banner still cuts it off. I have tried to follow the discussions about the banner stack - in edit mode, when I move to flexible height mode, the image is the perfect size (good!). When I preview it – the banner has completely disappeared. I have tried various over image stacks as an alternative with not satisfactory results. What would be the reason the banner disappears? I must be missing something fundamental. Thanks!
1 Like
Good morning @alarkin –
The Banner stack’s image is meant as a backdrop for other content. In fluid mode the height of the banner is determined by the content you place within the stack. No content in the stack equals zero height. Try placing a Paragraph stack in there and you’ll see the Banner will now responsively be the height of that content. You can use Margins stack around your content in the Banner to help responsively pad things out as well.
The image will still be cropped, scaled, etc to make sure the image always covers the entirety of the background while at the same time retaining its proportions (aka aspect ratio).
As for the non-fluid, or fixed height settings of the stack – The same thing happens here as withe the fluid setting. The image is cropped and scaled to make sure it covers the entirety of the background of the stack. The only difference is the height will not be fluid, but instead be a fixed value at each of the breakpoints.
I assume you’ve placed text on your image itself in a graphics editor like Photoshop or the like. While this looks good probably, it is not a great idea. The text can be distorted or as in the case cropped off due to the responsive nature of your design. It also means a search engine cannot see that text. It is better to apply text to things with a header, paragraph, etc as the search engine can actually see that.
If you’re not in need of placing content on top of your banner image, and you still want to just use your image as-is, just use an Image stack instead of the Banner stack.
I personally would recommend using the Banner stack with your image (minus the text added in a graphics editor) and then apply text in RapidWeaver.
1 Like
That is a wonderful and thorough response. Thank you! So if I understand this correctly, if I go to flexible height, the banner will only be as high as the content I put in it. So for me, that’s not a solution. I don’t get the part about the margin stack, though I have seen that described before - I put a margin stack in my banner but clearly I don’t know what to do after that.
I set the inner container to fluid - is that correct? and the height to flexible height mode. I put a header stack inside the banner for my text. And sure enough, the banner is only as high as the text. So none of these solutions work. Is there a way to put an expander type stack in the banner so it magically expands to cover my entire image? That would be the Rube Goldberg solution, but I’m open to anything. Thanks!
Use an Image stack instead of the Banner stack. This will get you what you desire.