Hi, I have a CSS code for Discourse backgrounds. The problem is, when I scroll down, the image doesn’t scroll down - rather, a white background appears and covers the wallpaper… html, body { height: 100%; } // 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; } } .d-header { box-shadow: none; } body { background: url('http://minecraftrad.io/images/bg1.jpg') no-repeat 50% 50% fixed; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; } What’s wrong with it? The category background feature wont work because there is no white background for topics, etc. and it just simply looks bad. All help appreciated!

I think you need to also set any wrapper elements inside of the body to min-height: 100%. I set section#main{min-height: 100%} to get this to work. [image] In case you aren’t already doing it, you can try these kinds of things inside of your browser’s web inspector. On Chrome, right click on a page and select ‘inspect element’. It’s a lot easier if you have 2 monitors, You can detach the inspector window and have enough room to see what is going on and try things out.

TRY THIS CODE // 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; } } .d-header { box-shadow: none; } body { background: url('http://minecraftrad.io/images/bg1.jpg') no-repeat 50% 50% fixed; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; } JUST FOR BACKGROUND YOU NEED FOR THIS body { background: url('http://minecraftrad.io/images/bg1.jpg') no-repeat 50% 50% fixed; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; }

What's wrong with this CSS?

Product Support

Erik_Manger (Erik Manger) May 6, 2015, 8:23pm 4

THANK YOU THANK YOU THANK YOU!

You’re awesome, works perfectly!

Topic		Replies	Views
Is this CSS for background imagery good? Product Support	4	1647	October 11, 2015
iPhone not properly showing image area on site. Why? Development css	5	490	April 2, 2024
Scrolling does not work on some topics with CSS body height set to 100% Product Support	3	3255	August 22, 2016
Category background images do not scale good for mobile UX	7	1614	September 17, 2019
Why don't background codes work in full screen chat page? Development	5	541	June 4, 2024

What's wrong with this CSS?

Related topics