Background disappearing when resizing

HTML & CSS
1

I’m having an issue with my background image which disappears when the page is resized.
Im using a WP/Mystile theme.

http://www.o3ozoneoils.com/

the part of the css relative to the background goes like this:

html { 
  background: url(http://www.o3ozoneoils.com/wp-content/uploads/2014/08/O3web_background3.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
2

The black background on your body element only shows above 768px because of this:

@media only screen and (min-width: 768px) {
body {
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0);
}

The other screen sizes get this:

body {
  background: #FCFCFC;
}

Just get rid of that second one if you don’t want it, at line 308 in yellow.css.

3

Thank you very much Ralph, it kinda work, at least now when I reduce the window to an i-phone size like, I get a black background which is acceptable, would it be possible to preserve the paisley image as well? If it’s too complicate, forget it, you helped a lot already! =D

4

It’s there, but the decorative bits are off to each side and not visible, because there’s a lot of black space between them.

5

Ok then, I’ll try to convince my client… hehe
Thanks a lot for your help.

6

You could squeeze the image at small screen widths but I’m not sure how good it will look.

@media screen and (max-width:500px){
html{background-size:100% 100%}
}
7

Ok thanks for the input, i’ll give it a try