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. [תמונה] 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; }

THANK YOU THANK YOU THANK YOU! You’re awesome, works perfectly!

What's wrong with this CSS?

Product Support

Qasem_h 6 במאי,‏ 2015,‏ 8:31pm 5

Your welcome @Erik_Manger

נושא		תגובות	צפיות
Is this CSS for background imagery good? Product Support	4	1647	11 באוקטובר,‏ 2015
iPhone not properly showing image area on site. Why? Development css	5	491	2 באפריל,‏ 2024
Scrolling does not work on some topics with CSS body height set to 100% Product Support	3	3258	22 באוגוסט,‏ 2016
Category background images do not scale good for mobile UX	7	1627	17 בספטמבר,‏ 2019
Why don't background codes work in full screen chat page? Development	5	542	4 ביוני,‏ 2024

What's wrong with this CSS?

נושאים קשורים