Při tvorbě responsivního designu jde snadno zajistit, aby se obrázky vložené značkou <img> vešly na obrazovku pomocí:

img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box
}

Pokud je na displeji více místa, než je šíře obrázku, obrázek se zobrazí v originálních rozměrech. Při zmenšování okna se potom bude zmenšovat, aby se vždy zobrazil celý.

Dosáhnout podobného chování je někdy potřebné i pro obrázkové pozadí. CSS vlastnost background-size ale nastavení maximální velikosti neumožňuje. Použití „background-size: 100%“ by způsobilo prosté roztažení pozadí i nad jeho skutečnou šířku.

Docílit chování jako u <img> s max-width jde ale menším trikem s využitím @media. Díky tomu se „background-size: 100%“ aplikuje jen v případě, že je stránka užší než pozadí, takže 100% velikost pozadí zafunguje žádoucím způsobem.

.image {
  background: url(i/400x40) no-repeat;
  height: 40px;
}
@media (max-width: 400px) {
  .image {
    background-size: 100%;
  }
}

Měl-li by element s obrázkovým pozadím navíc přizpůsobovat svou výšku aktuální šířce, jde využít triku s nulovou výškou a paddingem v procentech dle poměru stran obrázku.