It is possible to define "background-position: right bottom" for background images. But not every browser allows to define a right and bottom margin as well. Wrapped into an SVG the width and height of the SVG can help us establish a margin around our bitmap that works in every browser.


background: red url('../svg/bottomright.svg') no-repeat right bottom;


<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" width="360px" height="270px" xml:space="preserve"> <defs> <image id="image" xlink:href="../img/gene.png" width="324" height="231"/> </defs> <use xlink:href="#image"/> </svg>