Where shall I put this code for a top banner?

[Sherran]

I have the same question like this guy:How to add a header image and customize it

Have no idea where should I put this code. Any help?

I just put it here and looks like I am wrong about it.

Or is there any more simple component to add a banner picture to my discourse?

Thanks in advance.

[Moin]

Did you also install the Versatile Banner which is mentioned in that topic? The adjustment for that component won’t do anything without the component.

[Sherran]

Yes, I install and put it in use.

[HAWK]

Where are you getting stuck?

[Sherran]

I want to use the versatile banner just to insert the background image but the image only shows a little bit. I need to type words to show more of it but I don’t need words.

[HAWK]

It’s very difficult to understand the issue with so little info. Could you share images to show what is going wrong?

[Lilly]

Hi @Sherran if you are just wanting to insert a banner image, the Vesatile banner component may not be ideal. Perhaps try having a look at this topic:

How do I add a giant header image?

[image]

or have look at the various banner components in the theme-component category

https://meta.discourse.org/search?q=banner%20%23theme-component%20order%3Alatest_topic

[Lilly]

@Moin kindly just reminded me of this:

Create a an image banner

try this in a theme component. in common css: #homepage-banner { width: 100%; height: 300px; } you can adjust the height to however you like. put the following around the image in the versatile banner component where you have your image URL, probably the main heading content field. <div id="homepage-banner"> put image here </div> you can add other CSS code to format it more. you can look at the versatile banner on my site (see profile) and get an idea of what can be done with oth…

They clearly have a much better memory than I do

[Sherran]

I delete all the content in columns and insert a background picture:

But the picture is only shown like this:

And I want it to be shown in full size.
So I tried to put the code in the above given by the support or whoever it is in the theme‘s CSS (I don’t know if this is the right place. Looks like not.)

I don’t know how to customize HTML. If I have the banner image URL, how can I make it a banner?

[Lilly]

Did you look at the link I posted above? It has the solution for you:

[Sherran]

Thanks. I will try. When you say use this CSS, I don’t know where exactly shall I put that thing in {}. Let me see.

[Sherran]

The CSS #homepage-banner is not working. I changed the width and height but the image presented in full and didn’t show any changes. So I write everything in the main heading content:

But the image will get to the subject content instead of staying as a banner.

About the CSS didn’t work. I put it here this way. What I shall change?

I am not good at coding and HTML. I must be missing something. Hope I can have your help. Thanks in advance.