Category background images

Although this seems to be a rarely used feature, you can set a category’s background to an image. Unfortunately this results in an icky situation where you realize nothing is white in front of the background.

If you use enough CSS tricks, you can get it looking okay but not near as good as normal Discourse.

Now, I’m no CSS expert - perhaps there is a better way to do this that I’m not able to come up with. I also tried just adding a solid white strip to the background image, but it doesn’t play nicely with scaling. Either way, it would be nice if there was a way to add a background image but keep the middle white area - does anybody know how I could do this? Thanks.

why don’t you just use a faded out white background like the one on ?

Dark portions of the background make some text hard to read:

yeah do the same for them as well. That’s waht i did, any way

Okay, so this is where I’m at now:

Any way to get rid of these blank spaces?

do you want the background to be faded or not?

In my opinion, it looks better when it’s solid white.

1 Like

okay! what CSS have you put in so far?

body {
  background-attachment: fixed;
  background-image: url(;
  background-color: #ffffff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;

div#main-outlet > div.container,
div.list-controls > div.container, 
div#topic-title > div.container {
    background: none repeat scroll 0% 0% rgba(255,255,255,1.0);

.topic-area {
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 5px 0px 10px -3px rgba(0,0,0,0.2), -5px 0px 10px -3px rgba(0,0,0,0.2);
1 Like

I got it on the category listing using this:

div#main-outlet {
    padding-top: 50px;

div.list-controls > div.container {
    padding-top: 35px;

Close to getting it on the topic too.

div#topic-title > div.container {
    padding-top: 20px;

#topic-title {
    padding-top: 10px;


1 Like

for the category listing, try changing the class name to .nav-pills

and the Topic to #topic-title h1 a This might work!

EDIT: oh hang, i think i may have just been trying to do the opposite thing you wanted above! Good Work! What did it?

Btw can you give us a link to your website? it looks awesome!

1 Like

Going to see if I can spruce up some of the spacing now. Thanks for your help so far :smiley:

1 Like

well, I didn’t do much! but thanks anyway! Edit: @NomNuggetNom there dosn’t seem to be a sign up button…

It’s a Minecraft server, you create an account in-game. If you want the server details, I can PM them to you.

1 Like

oh right i get it, and this is like the community forum?

Yup, exactly :).

1 Like

this is where i spend about 5 hours a day, no joke.

Unlike your forum, which when I made an account just asked for the username you wanted and e-mail, the forum for McPvP requires you to join the server and use /createaccount to create an McPvP account. From this, you create a forum account.

The reason we use this is because users can’t just call themselves whatever they want, or even take someone else’s username. Instead, they are on the forum as their in-game name.

I would use the terms “Open ID” and “Closed ID”, but I have no idea how to use them correctly in a sentence D:


Can confirm.

1 Like

I found a better solution. @FezodgeIII Maybe this will be useful to you too.

html {
    height: 100%;

body {
    min-height: 100%;

// A solid white background column on every page! Woo!
body:before {
    display: inline-block;
    position: fixed;
    left: 50%;
    right: 0;
    width: 1000px;
    transform: translate(-50%, 0);
    height: inherit;
    background-color: white;
    content: " ";

Basically this adds an empty white background behind every page. Pretty sweet. I’m working on adjusting it to match the @media tags right now.

1 Like

I seem to remember height on html and body being problematic for infinite scrolling. Does it work without that?

Also, try this:

background-color: rgba(white, 0.2);
1 Like