Posted by tsdavies on Mon, Jun 16, 2025 - 4:15pm

Hi, I'm just starting out and experimenting with blocks etc. 

I have created a sub theme of basis, and am trying to do this:

I want a banner-type image at the top, above the menu, and I want the image to be aligned in the top left corner of the screen, with no padding and no margin.

My css skills are not up to this but I tried changing a few things using 'inspect' in the browser, like 

margin: 0; and 

padding: 0; for 

.l-header-inner 

- which worked in the browser, but then when I put them into the custom.css for my sub theme, it didn't work.

I have been badgering away at it for hours and getting nowhere, please can someone just tell me how I can do it?

I want to create a few blocks with different banner-type images in, that I can have at the top of various pages, above the menu, where the images are flush with the edge of the screen: without any margin or padding at the top or the left or right edges. (Some of my images are left-aligned, and some are right-aligned.)

The important thing is that I want no margin or padding.

Thanks

 

Most helpful answers

Thanks! I really like

Thanks! I really like Backdrop -  No maintenance nightmares.

Turn off cashing /admin

Turn off cashing /admin/config/development/performance (and is better to full clear cache after change the theme files '.info' or '.php').
Check the correct connection your ‘custom.css’.
Test your CSS on any class using the inspector.
CSS Flex is great for aligning objects Aligning items in a flex container guidance 

(EDIT: replaced tiny URL with full URL)

Hi tsdavies

Hi tsdavies

Just to fill in a few blanks here:

Are you using the Custom blocks that come with Backdrop, the Image Blocks module or some other block solution to add the image?

Will this just be at the top of the header but disappear as the user scrolls or will it be a sticky banner that stays at the top when the user scrolls?

What you might also need to do after putting in your custom CSS is to clear at least the CSS & JS cache (under the Home > Flush all caches).  Flushing caches can often solve problems like this if you had it working in inspector.  

Have you also listed your custom.css file in your my_subtheme.info file?

Comments

Tue, Jun 17, 2025 - 4:05am by yorkshirepudding

Hi tsdavies

Just to fill in a few blanks here:

Are you using the Custom blocks that come with Backdrop, the Image Blocks module or some other block solution to add the image?

Will this just be at the top of the header but disappear as the user scrolls or will it be a sticky banner that stays at the top when the user scrolls?

What you might also need to do after putting in your custom CSS is to clear at least the CSS & JS cache (under the Home > Flush all caches).  Flushing caches can often solve problems like this if you had it working in inspector.  

Have you also listed your custom.css file in your my_subtheme.info file?

Thu, Jun 19, 2025 - 8:55am by tsdavies

Hi @yorkshirepudding

I am using Custom Blocks. I didn't know there was an Image Blocks module so after your suggestion I tried it but couldn't figure it out.

This will just be at the top of the header, not sticky.

I am not great at css so that might be my main problem.

Which item do I need to add css to, to get images in the block to go right to the edges of the screen, with no padding? What sort of block should I use? Or could you give me an example of how to do it with a particular type of block? 

At the moment I have a custom block - do I go into the Style Settings of that block and set Wrapper tag to DIV, and then make up a name for a Wrapper class, and then refer to that name in my custom css by putting a dot in front of it?  And then something like margin:0; padding: 0;

Wed, Jun 18, 2025 - 1:01pm by DanM

Sounds similar to what I did on my website, though I did add padding and margins. In my case, I used Nivo slider placed at the top in the layout. 

I'm no expert with Backdrop or css, but you might get some ideas by looking at what I did with a browser's developer tools. Don't know if it's ok to post a link here, but you can find it by searching for FotoSpecchio. The photography section has the most banner photos.

It took a while to get it just the way I wanted it - don't get discouraged.

Hope this helps.

 -Dan

Wed, Jun 18, 2025 - 1:16pm by tsdavies

Nice site, thanks, and good to see how fast it loads as that was one of my main reasons for choosing Backdrop.

Wed, Jun 18, 2025 - 1:21pm by DanM

Thanks! I really like Backdrop -  No maintenance nightmares.

Tue, Jun 17, 2025 - 9:16am by Enthusiast

Turn off cashing /admin/config/development/performance (and is better to full clear cache after change the theme files '.info' or '.php').
Check the correct connection your ‘custom.css’.
Test your CSS on any class using the inspector.
CSS Flex is great for aligning objects Aligning items in a flex container guidance 

(EDIT: replaced tiny URL with full URL)

Wed, Jun 18, 2025 - 10:27am by tsdavies

Thank you very much, that's a great and full description of how to use flex box.