How to contain an image in the division when browser zoom?

Question

I have an image in the header background which I cannot force to keep changing proportionally and being contained (and cover at the same time) in the header div while you zoom a browser. While zooming out it leaves empty margins on the sides

Please, have a look at live example http://sch180.minsk.edu.by/

The CSS code for the header div is the following:

body {
    width:100%;
    min-width: 1280px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background:url(/sm.aspx?guid=1913);
    color: #000000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0px;
}
#hd {
    background: url(/sm.aspx?guid=1903) top center no-repeat;
    background-size: contain;
    height: 150px;
    margin: 0 10% 0 10%;
    overflow: hidden;
}

As I'm no expert in web design, surely I'm doing something wrong. Please, help me to rectify the code for the header.

Thank you in advance!

Answer 1

I think the best solution, in my opinion, would be to use an img tag instead of background-image.

For example:

<div id="hd"><img src="sm.aspx?guid=1903" /></div>

#hd img {
   display: block;
   width: 100%;
   height: auto;
}