Setting up the banner image


(Pravil) #1

I am trying to create a banner topic with an image background but the image doesn’t display. I am using the below CSS code under ‘Customize’ section. Could you please let me know if I should use a different CSS?

#banner {
border-radius: 0;
box-shadow: none;
background: url(“IMAGE PATH URL HERE”) no-repeat;
padding: 20px;
max-height: inherit;
background-size: cover;
background-color: rgba(255, 255, 255, .6);
background-blend-mode: color;
}

(Daniela) #2

Try #banner instead of banner


(Pravil) #3

Thanks for the response Trash. I used #banner itself as you can see in the code snippet. Am I missing something?


(Daniela) #4

Well, the correction was made by @codinghorror.
Your original post was:

banner {

border-radius: 0;
.....

Please, check your stylesheet and confirm you are using #banner


(Jeff Atwood) #5

No, markdown uses # so he had #banner view the edit raw.


(Daniela) #6

Ok, thanks @codinghorror and sorry @pravilz .

So your problem is only the image or all the CSS?
Have you add a flag to enable your customization?

I tried to add an image and it works:

#banner {
    margin-top: 20px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    font-family: 'Advent Pro', sans-serif;
    font-size: 16px;
    line-height: 25px;
    color: #fff;
    font-weight: bold;
    max-height: 200px;
    background-image: url("image-url");
    background-position: center;
}

the only strange thing is that the close button is on the left instead of the right (where it has always been).
but I see other forum with this issue (try https://discuss.moe/).

I don’t know if it is a change by the team or a little bug… @codinghorror ?

EDIT: just add a #banner .close {float: right;} to move the button to the right (original position)


Banner in the top of the lists with sign up form