How can I remove my image css

Question

I have the following code:

.imgleft{
    background-image: url("logo.png");
    background-size: 100%;
    float: left;
}

... but I want to make my website responsive, so when my width is smaller than 650 I want my image gone.

I tried following code, but it doesn't work :

@media screen and (max-width: 650px) {
    .imgleft{
        background-color: none;
    }
}

`background-color: none;` is not valid. If you want it gone, use `display: none;` instead. — Hunter Turner, Feb 17 '16 at 17:02
`background-image: none` why would changing the `background-color` have any effect on the image? — zzzzBov, Feb 17 '16 at 17:18

score 1 · Answer 1 · answered Feb 17 '16 at 17:01

1

You are just removing the background-color of image, which won't hide it :)

Try with display:none

@media screen and (max-width: 650px) {
    .imgleft{
        display: none;
    }
}

answered Feb 17 '16 at 17:01

Sachin

John Slegers · Answer 2 · 2016-02-17T17:32:08.077

You're setting the value of your background-color to none, while you are supposed to set the value of your background-image to none.

So, what you're trying to achieve, is this :

@media screen and (max-width: 650px) {
    .imgleft {
        background-image: none;
    }
}

(see this Fiddle for a demo)

If you don't want either any background-color or any background-image, you could also do this :

@media screen and (max-width: 650px) {
    .imgleft {
        background-color: transparent;
        background-image: none;
    }
}

(see this Fiddle for a demo)

... or this :

@media screen and (max-width: 650px) {
    .imgleft {
        background: transparent;
    }
}

2 Answers2