Replace image

examples/csses/replace-image.html

<html>
<head>
<title>Replace Image</title>
<link rel='stylesheet' href='replace-image.css' />
</head>
<body>
<div id="city-view">
</div>
</body>
</html>

examples/csses/replace-image.css

#city-view {
  border: solid;
}


@media (min-width: 1281px) and (min-height: 800px) {
  #city-view {
    width: 1280px;
    height: 716px;
    background-image: url(../img/austin-yapc-1280x716.jpg);
  }
}

@media (min-width: 800px) and (max-width: 1280px) {
  #city-view {
    float: right;
    width: 617px;
    height: 716px;
    background-image: url(../img/austin-yapc-617x716.jpg);
  }
}

@media (max-width: 799px) {
  #city-view {
    float: right;
    width: 201px;
    height: 157px;
    background-image: url(../img/austin-yapc-201x157.jpg);
  }
}

css image replacement