Background image behind the forum


#1

Can anyone tell me the css to input background image behind the discussion board. thank you


(Jeff Atwood) #2

You can take a look at http://talk.turtlerockstudios.com as a live example.


#3

excellent, got it thanks!


(Kiefer Davies) #4

I’m trying to do something similar. Where is the CSS for a background image?


#5
html {
    background: #191919 url(https://cdn-enterprise.discourse.org/turtlerock/uploads/default/original/3X/a/3/a377244383effef6d00c48483ab4f2f441607862.png);
    background-size: cover;
    background-position: 50% 30px;
    background-attachment: fixed;
}

To add in a custom CSS in /admin/customize/css_html.


(Kiefer Davies) #6

Thanks so much! When putting in the url for my image, does it have to be pulled from the “Site assets” thread?


#7

It does not have to but it is a convenient way to upload your image on your Discourse. :wink:


(Guido Jansen) #8

Hi! When I do this the background is indeed placed, but it’s behind everything (see attachment). This is a bit too much for me and is bad for readability:

I would like to have the background show on the left/right side of the main column instead of also having this behind all the text of the forum.

What would be the CSS to have a plain white background behind the main content column (all pages) but still allow for the background?


(Guido Jansen) #9

Nevermind, found it. This seems to work nicely, added some padding:

#main-outlet {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
}

#10

Is there any way to make the “background-color” semi-transparent? I tried adding an opacity value, like this,

#main-outlet {
background-color: white;
opacity: .09;
padding-left: 10px;
padding-right: 10px;
}

but this makes everything, including the text transparent. Does anyone know how to target just the background-color?

Edit: This seems to work just fine:

{
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(54, 25, 25, .5);
}