CODEWITHSUNDEEP
htmlcssmedia-queries
Konstantinos Natsios
Konstantinos Natsios

Reputation: 2924

Media queries issue with background URL

I have this html code of one div in my wordpress site.

<div class="bwpb-column bwpb-video-holder backgr bwpb-colwidth-4 " style="color: rgb(255, 255, 255); text-align: inherit; width: 100%; min-height: 923px; height: 628px; background: url(http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png) 50% 100% no-repeat rgb(255, 255, 255);"><div class="bwpb-overlay" style="background-color:rgba(255,255,255,0.01)"></div><div class="bwpb-column-inner" style="padding: 0px 15px; margin-top: 461.5px;"></div></div>

All im trying to do is to set some media queries that will change this image if there is a laptop or a tablet or smartphone.

After some research i've tested this code but its not working

(I've set the class of this div to .backgr)

@media (min-width: 1200px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
  }

@media (max-width: 992px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
@media (max-width: 768px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
  }


@media (max-width: 481px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
  }

Does anyone have any suggestion of what should i put instead of my code so it will load other pics for phone/tablet/laptop ?

Upvotes: 1

Views: 85

Answers (2)

Majid Sadr
Majid Sadr

Reputation: 1071

after each media query you should close bracket (}) .

and it's good to use this:

@media only screen and (max-width:700px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
}

Upvotes: 1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You forgot to put the closing bracket } on each media query. Should be like this:

@media (min-width: 1200px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
  }
}  

@media (max-width: 992px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
}  
@media (max-width: 768px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
  }
}

@media (max-width: 481px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
  }
}

Upvotes: 4

Related Questions