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!
1 Like
simon
May 6, 2015, 7:04pm
2
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.
2 Likes
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;
}
5 Likes
THANK YOU THANK YOU THANK YOU!
You’re awesome, works perfectly!
2 Likes
Your welcome @Erik_Manger