Adding a Full Width Banner Graphic to the Header area

[stoo23]

Hi again guys,

I have tried a quick search or two, but am probably not typing the right words to get an answer lol

I would like to replicate the Full Width Banner graphic that existed on the Old forum ver' 2.0.11, before we upgraded it to 2.1.4, it Obviously uses a different theme now, but I would like to replicate the look again.

Not being an SMF, CSS Or php Guru or genius, I am at a slight loss to know Where exactly, in What file And How I could create the look contained in the attached examples.

Any help and advice will be Fantastic   

The existing graphic, is 1920 x 106 btw

[Kindred]

Your best bet would be to ask in the thread dedicated to supporting that specific theme

[stoo23]

OK,.. but it Is the Default SMF 2.1.4 Theme.

[Sesquipedalian]

At the end of index.css, you could add this:

Code Select Expand

h1.forumtitle {
    background-image: url("https://example.com/image.jpg");
}
Obviously, use the real URL of your image.

[Antechinus]

That is a start, but the default #top anchor won't fill the banner without an extra tweak. That needs to be set to display: block; too. It would also be a good idea to set a defined height on the anchor. This is best done via padding rather than height (because CSS reasons) and if it is set in % it will keep the correct aspect ratio in any viewport.

Also, you will probably want to set background size on the image so it fits nicely on all screens. And, really, since the default picture tag will be redundant you will probably want to stop that from displaying.

This should do it:

Code Select Expand

.forumtitle {
    background-image: url("https://example.com/image.jpg");
    background-size: cover;
}
#top {
    display: block;
    /* For a banner with a 5:1 width/height ratio */
    padding-top: 20%;
}
#top picture {
    display: none;
}

[stoo23]

Thank you both, I will try that and report back