css3: remove background image (background-image:none; not working)

Question

Hi,
like i said it in the title background-image:none; is not working since with css3 background-image:url('...'); return a new layer each time the file is new. i'm trying to remove image as my media query change the background size.So i was wondering what was the workaround that. Can any one help?

     #splashHeader div.headerSplash{
            height: 254.5px;
            width: 100% ;
            display: block;
            background: none ;
            background-image: url("/static/woman350.jpg");
            background-position: center;

            background-size:  auto 254.5px;
            background-repeat: no-repeat;
            text-align: center;
            margin-left: auto;
            margin-right: auto;

        }
    @media all and (min-width: 640px) {
       #splashHeader {
            background-color: initial;
            padding: 0;
            position: relative;
            background: none ;
            background-size: 350px;
            background-image: url('/static/woman500px.jpg');
            background-repeat: no-repeat;
            background-position: right top;
            background-size:  auto 350px;
        }
}  
@media all and (min-width: 768px) {
   #splashHeader{
        background-color: initial;
        padding: 0;
        position: relative;
        background-size: 350px;
        background: none;
        background-image: url('/static/woman600px.jpg') ;
        background-repeat: no-repeat;
        background-position: right top;
        background-size:  auto 350px;
    }
}

@media all and (min-width: 960px) {
 #splashHeader .innerSection{
    height: 500px;
    background: none;
    background-image: url('/static/woman_maximumSize.jpg');
    background-color: initial;
    padding: 0;
    position: relative;
    background-size: auto 500px;
    background-repeat: no-repeat;
    background-position: 70px 0px;

    }

}

the imge that is stiking is the one with the one with background-position: right top;

Answer 1

It works just fine out of the box, your error must be somewhere that you haven't shown us.

div {
  background-image: url('http://jsfiddle.net/img/logo.png');
  background-color: black;
  width: 125px;
  height: 23px;
  margin-bottom: 10px;
}
div + div {
  background-image: none;
}

<div></div>

<div></div>

Answer 2

Do not use background: none in your CSS.

The reason is that, background: none makes all the background properties as none.

May be because of this your other background properties are failing to work.

Just remove the background: none CSS from everywhere and try to run the code.