Atomic theme

Hi, is there a way to configure image banners so they are not cut from the top, but from the bottom?
Also, it would be nice to be able to split the top navigation block, so the logo stays aligned to the left and the nav menu to the right.
Thank you!

Hi Victoria, can you clarify what you mean by image banners? A screenshot will help. Also what version of concrete are you using?

Hi Jess,
Thank you for your reply.
I am using the very last version, 9.1.
The image banner is the one you add to the top of the page with the Banner attribute. Sometimes, specially when you have a pic that doesn’t have much space on top, it is difficult to manage. For example, if you have a pic of four people in line, and there is little margin on top, when you add it to the banner, everybody gets their head cut :slight_smile: . I think the image is being centered vertically, if we had the option to align it to top, that wouldn’t happen…
Thanks again for your reply!

If you look at the css for the image background (dev console){

div.ccm-block-hero-image div.ccm-block-hero-image-image {

1. background-position: 50%;
2. background-size: cover;
3. height:50vh;
4. z-index: 1;


background-size: cover - means the image will be cropped to fill the entire area.
background-position: 50%; - puts it in the middle.

You can add some css to the page (for example, with a header extra content attribute or with @mesuva’s theme styling tool Theme Styling Tool - Concrete CMS )

Adjust the background position as described in background-position - CSS: Cascading Style Sheets | MDN

Or you could create a custom block template with your background-position css.

Awsome, thanks a lot John!