Hi, A friend of mine gave me this code to use on Discourse for background imagery. It works fine but I was wondering if the way it is coded could be perfected a little more? // solid white background for content body:before { display: inline-block; width: 1125px; min-height: 100%; height: inherit; background-color: white; content: " "; position: fixed; left: 50%; right: 0; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); } // compatibility for all devices @media (max-width: 1139px) and (min-width: 1000px) { body:before { width: 1010px; } } body { background: url('https://i.imgur.com/12WWafT.jpg') no-repeat 50% 50% fixed; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; }

I’m using this on the forum I’m putting together now. I don’t think you need the media queries section if you are using a recent version of Discourse: // compatibility for all devices @media (max-width: 1139px) and (min-width: 1000px) { body:before { width: 1010px; } } Also, the width in the first part should be 1126px instead of 1125px. The margin needs to be adjusted for the admin section. It is a problem in the Discourse css. Until that gets fixed, you can use this to keep all the admin section inside of its wrapper: .admin-contents { margin-left: 0; margin-right: 0; } The ‘Categories’ page will need a bit of work to look good like this.

That’s neat! I assume the point of it is to avoid having the background image flash while the page is loading. I think that problem could also be fixed by changing the Discourse styles so that the page doesn’t collapse during the loading event.

Good man! I can use in my site. Thanks! :yum:

Is this CSS for background imagery good?

Product Support

Roxelle (Marco) October 11, 2015, 2:09pm 4

Good man! I can use in my site. Thanks!

Topic		Replies	Views
Is there any way to change the background of the my website in Discourse Development	3	1510	June 15, 2022
Category Background Won't Work Right Bug	5	952	July 17, 2020
What's wrong with this CSS? Product Support	4	1392	May 6, 2015
Forum background is transparent Product Support	5	841	July 15, 2021
Global Backgrounds Feature	12	2636	September 24, 2018

Is this CSS for background imagery good?

Related topics