Is this CSS for background imagery good?

Product Support

AI-generated summary

A discussion started by Erik_Manger about whether the provided CSS code for background imagery is good. The code is intended to create a solid white background for content and ensure compatibility with all devices. simon suggests an alternative approach to avoid background image flashing by modifying Discourse styles. Other users, including riking and Roxelle, find the code useful. simon provides additional feedback, recommending the removal of the media queries section for recent Discourse versions and adjusting the width. He also suggests a fix for the admin section margin issue and notes that the ‘Categories’ page requires further work to look good with this code.

1

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;
}
2

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.

3

Looks good to me :+1:

4

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

5

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.