Set SVG height through CSS?

Here's my CSS:

#social #twitter {
    background-image: url("../img/twitter.svg");
    max-height: 32px;
    max-width: 32px;
}

And my HTML looks like this:

<div id="social">
    <div id="twitter"></div>
</div>

The SVG doesn't scale down to 32x32. The SVG is 512x512. Could someone help me? Thanks.

Answers


Try to add

background-size: contain;

to the CSS. See the MDN docu for details on background-size and the table of supporting browsers and browser versions.


Need Your Help

Weird behaviour by node.removeChild(child)

javascript html

I have created a very basic layout of tables and checkboxes. I have eight textboxes and eight rows in a table. I just tried to add row on checkbox checking and remove on unchecking.