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;
}
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!
La solution
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;
}