Auto-size logo-banner

[ninjaraven]

Hi fellas, 

I am going to ask here in the coding help part, since I want to understand more of it. 
And I think the possibilities to do the same with the regular admin panel can´t do that. 

Anyways, if I did not find the right option in the regular admin panel after 2 hours of trying a couple different things, please forgive me    

I just started to get into customizing the forum and wanted to start with uploading a logo image, but rather a logo-banner. 

nightingale-forum.proboards.com/  there as an example. 

But I try to give that picture a function that, when someone opens the forum and the image is being loaded, it will adjust and center itself on the size of a guest´s screen size. 

Or I really don´t know which image size I should upload to do so. 

a#logo { vertical-align: middle; color: @banner_text_color; text-shadow: @banner_text_shadow; text-decoration: @banner_text_decoration; font: @banner_text_font; font-variant: @banner_text_caps; text-transform: @banner_text_case; white-space: normal; word-break: break-all; }

no horizontal-align possible. 

Thanks in advantage  

[Retread]

Mar 19, 2020 11:36:14 GMT -8 ninjaraven said:

But I try to give that picture a function that, when someone opens the forum and the image is being loaded, it will adjust and center itself on the size of a guest´s screen size. 

Or I really don´t know which image size I should upload to do so.

ninjaraven

If we ADD some modifications to the bottom of your Style Sheet, we should be able to fill your banner area with the image you're using for your Logo. We'll also modify the containers so the Banner height will adapt, according on the user's viewport.

/* Auto sizing Logo which fills the Banner area */
header {
    text-align:center; 
    margin:0px;width:100%; 
    padding:0px;
    position:relative;
}
#banner {
    text-align:center; 
    margin:0px;width:100%; 
    padding:0px;
    height:auto;
}
#banner-container {
    text-align:center; 
    margin:0px;
    width:100%; 
    padding:0px;
    position:relative;
}
h2 #banner {
    text-align:center;
    margin:0px;
    width:100%;
}
#logo img{
    width:100%;
    left:0px;
    margin:0px;
}
/* end of section */

NOTES:
Even a small image will be displayed large enough to fill the banner, but small images will have low resolution when expanded to fit a large screen. Better too big an image than too small.

It's wise to use an image which has a high aspect ratio. Image width should be considerably greater than length, else your banner will be quite tall and waste a lot of space on every page.

[ninjaraven]

Retread 

amazing reply, thanks a lot. now i can also better understand the single parameters to be set 

header {
}

#banner {
}

#banner-container {
}

h2 #banner {
}

#logo img{
}


bracket´s inside i understood before. 

And yes it is doing the needed function. So i will export a higher resolution image for it. 

[Retread]

You're welcome, ninjaraven

Mar 19, 2020 14:31:50 GMT -8 ninjaraven said:

parameters

If you have time, read this and then navigate around to different pages on the w3schools site:
www.w3schools.com/css/css_syntax.asp

We call the 'stuff' before the braces selectors.
What's inside the braces are properties and values.