0

I write responsive page. In desktop, table and mobile must to be images with different extensions. If I embed images in html img src="....", all display fine. If I embed images in css content: url, images don`t display in firefox browser. And I need embed it only in css, because as you decrease the screen images will be loaded another. Thanks.

<div id="nav_image">
           <div id="images">
            <div class="div_images"><a href="#"><img src="" class="images" id="img1"></a></div>
            <div class="div_images"><a href="#"><img src="" class="images" id="img2"></a></div>
            <div class="div_images"><a href="#"><img src="" class="images" id="img3"></a></div>
            <div class="div_images"><a href="#"><img src="" class="images" id="img4"></a></div>
            </div>
        </div>

#nav_image #img1{
    content: url(http://images.apple.com/v/home/cm/images/promos/iphone_6s_large.jpg);
}

#nav_image #img2{
    content: url(http://images.apple.com/v/home/cm/images/promos/apps_for_earth_large.jpg);
}

#nav_image #img3{
    content: url(http://images.apple.com/v/home/cm/images/promos/macbook_large.jpg);
}

#nav_image #img4{
    content: url(http://images.apple.com/v/home/cm/images/promos/accessories_large.jpg);
}
V. Rotenberh
  • 127
  • 7

1 Answers1

0

Because the image is inline element. So you can set display to block or inline-block.

JSBIN.

Todd Mark
  • 1,847
  • 13
  • 25