CODEWITHSUNDEEP
css
Craiginwlaes
Craiginwlaes

Reputation: 39

Change background image size with media query

.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
    background-size: 100%;
}

@media(max-width:767px) {
.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
  background-size: 50%;
  background-repeat: no-repeat;

}
    }
<div class="logo"> </div>

I can't work out why this doesn't work - any ideas why the image doesn't render?

HTML:

<div class="logo"> </div>

CSS:

.logo {
background-image: url(../img/logo_white.png);
background-size: 100%;}

@media(max-width:767px) {
.logo {
background-image: url(../img/logo_white.png);
background-size: 50%;
background-repeat: no-repeat;}
}

Any help greatly appreciated

Upvotes: 0

Views: 5885

Answers (3)

somethinghere
somethinghere

Reputation: 17350

Uhm mate, heres a simple one: give your wrapper some height.

.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
    background-size: 100%;
    width: 100%;   
    height: 100px;
}

@media(max-width:767px) {
    .logo {
        background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
      background-size: 50%;
      background-repeat: no-repeat;

    }
}
<div class="logo"> </div>

Upvotes: 0

Alexander Dayan
Alexander Dayan

Reputation: 2924

First of all, you syntax was wrong. Secondly, at least in the code you provided, your div was zero size. See how it works:

.logo {
  display: block;
  width: 99%;
  height: 400px;
  border: solid 1px red;
  background-image: url('http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/10/mountains.jpg');
  background-size: 100%;
}

@media only screen and (max-width: 767px) {
  .logo {
    background-size: 50%;
    background-repeat: no-repeat;
  }
}
<div class="logo"></div>

But is it that you want for responsive design? Probably you misunderstood the meaning of background-size: 50%; property?

Upvotes: 0

Waxi
Waxi

Reputation: 1651

Try this...

@media screen and (max-width:767px)

Upvotes: 1

Related Questions