Display the full image not part of it when you resize the browser

HTML & CSS
1

How do I fit the background image to height:20% and width=100% to display the full image not part of it when you resize the browser?

#heading {
    position: fixed;
    text-align: left;
    top: 0%;
    height: 20%;
    left: 0;
    width: 100%;
    border: 2px black outset;
    background-image: url('~/htmlphp/heidelberg%20castle(longer).jpg');
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 99;
}
2

Use <img> tag and set it’s width and height in css.

like this:

<src="~/htmlphp/heidelberg%20castle(longer).jpg" id="heading">

css:

#heading {
    position: fixed;
    top: 0%;
    height: 20%;
    left: 0;
    width: 100%;
    border: 2px black outset;
    z-index: 99;
}
3

Hi,

For IE9+ you can use background-size:cover which will ensure the image covers the specified area while keeping the aspect ratio of the image intact.


    position: fixed;
    text-align: left;
    top: 0%;
    height: 20%;
    left: 0;
    width: 100%;
    border: 2px black outset;
    background-image: url('~/htmlphp/heidelberg%20castle(longer).jpg');
    background-repeat: no-repeat;
    background-position: center top;
[B]   background-size:cover; [/B]   
z-index: 99;
}

Note that if you are not using the border-box model then your 2px borders along with 100% width will make the element 4px too big for its container. You can omit the width:100% and just add right:0 instead.

4